Radio Button Group
- HTML/CSS:Dev Ready
- Layout:Responsive
About Radio Button Group#
Default#
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
<div class="slds-form-element__control">
<div class="slds-radio_button-group">Mobile#
On mobile devices, such as phones and other devices that have touch as the primary method of interaction, radio button groups will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, and also become stacked.
Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.
States#
Disabled#
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
<div class="slds-form-element__control">
<div class="slds-radio_button-group">Required#
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">
<abbr class="slds-required" title="required">*</abbr>Radio Group Label</legend>
<div class="slds-form-element__control">Has Error#
<fieldset class="slds-form-element slds-has-error">
<legend class="slds-form-element__legend slds-form-element__label">
<abbr class="slds-required" title="required">*</abbr>Radio Group Label</legend>
<div class="slds-form-element__control">Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-radio_button-group |
|---|---|
| Summary | Initializes radio button |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-radio_button |
|---|---|
| Summary | |
| Restrict | .slds-radio_button-group span |
| Selector | .slds-radio_faux |
|---|---|
| Summary | Create styled button when adjacent to the input[radio] element |
| Restrict | .slds-radio_button span |
| Selector | .slds-radio_button__label |
|---|---|
| Summary | Label element inside of a radio button |
| Restrict | .slds-radio_button label |
Radio Button Group Release Notes
2.13.1
Fixed
- Fixed issue where mobile text size wasn't accurately sized.
2.13.0
Changed
- Added
aria-describedby="error_01"to the inputs to improve accessibility in the error state.
2.11.7
Added
- Added documentation and examples for mobile/touch context
2.11.0
Changed
- For mobile devices, radio button groups stack vertically to account for the limited horizontal space of mobile screens.