Radio Group
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
About Radio Group#
Radio buttons are shown in a group of two or more. The user can only select one radio button at a time. You should use the same name
attribute on all radio buttons in the group. This ensures that if there is more than one group in the form, each one stays associated with its own group.
The ability to style radio buttons with CSS varies across browsers. To ensure that radio buttons look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.
Accessibility#
Groups of radio buttons should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of radio buttons. The fieldset is placed around the whole group and the legend contains the question.
Custom radio buttons are created by applying the .slds-radio
class to a <label>
element. To remain accessible to all user agents, place an <input>
with type="radio"
inside the <label>
element. The <input>
is then visually hidden, and the styling is placed on a span with the .slds-radio_faux
class. The styling of the span changes based on whether the radio button is selected or focused by using a pseudo-element. A second span with .slds-form-element__label
contains the label text.
When a radio group is required, the <fieldset>
should receive the class .slds-is-required
. The <legend>
should then get <abbr class="required" title="required">*</abbr>
added to the DOM for visual indication that the radio group is required.
When disabling a radio button, either the entire group must be disabled or if only some radio buttons are disabled, then the checked radio button cannot be disabled.
Base#
<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">
<span class="slds-radio">
<input type="radio" id="radio-7" value="radio-7" name="options" checked="" />
<label class="slds-radio__label" for="radio-7">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label One</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-8" value="radio-8" name="options" />
<label class="slds-radio__label" for="radio-8">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label Two</span>
</label>
</span>
</div>
</fieldset>
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">
<span class="slds-radio">
<input type="radio" id="radio-13" value="radio-13" name="options" disabled="" />
<label class="slds-radio__label" for="radio-13">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label One</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-14" value="radio-14" name="options" disabled="" />
<label class="slds-radio__label" for="radio-14">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label Two</span>
</label>
</span>
</div>
</fieldset>
Checked and 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">
<span class="slds-radio">
<input type="radio" id="radio-19" value="radio-19" name="options" disabled="" checked="" />
<label class="slds-radio__label" for="radio-19">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label One</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-20" value="radio-20" name="options" disabled="" />
<label class="slds-radio__label" for="radio-20">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label Two</span>
</label>
</span>
</div>
</fieldset>
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">
<span class="slds-radio">
<input type="radio" id="radio-25" value="radio-25" name="options" checked="" />
<label class="slds-radio__label" for="radio-25">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label One</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-26" value="radio-26" name="options" />
<label class="slds-radio__label" for="radio-26">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label Two</span>
</label>
</span>
</div>
</fieldset>
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">
<span class="slds-radio">
<input type="radio" id="radio-31" value="radio-31" name="options" aria-describedby="error_01" checked="" />
<label class="slds-radio__label" for="radio-31">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label One</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-32" value="radio-32" name="options" aria-describedby="error_01" />
<label class="slds-radio__label" for="radio-32">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label Two</span>
</label>
</span>
</div>
<div id="error_01" class="slds-form-element__help">This field is required</div>
</fieldset>
Right to Left#
<div dir="rtl">
<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">
<span class="slds-radio">
<input type="radio" id="radio-37" value="radio-37" name="options" checked="" />
<label class="slds-radio__label" for="radio-37">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label One</span>
</label>
</span>
<span class="slds-radio">
<input type="radio" id="radio-38" value="radio-38" name="options" />
<label class="slds-radio__label" for="radio-38">
<span class="slds-radio_faux"></span>
<span class="slds-form-element__label">Radio Label Two</span>
</label>
</span>
</div>
</fieldset>
</div>
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 |
---|---|
Summary | Initializes radio button |
Support | dev-ready |
Restrict | span |
Variant | True |
Selector | .slds-radio__label |
---|---|
Summary | Label container of the text and faux radio |
Restrict | .slds-radio label |
Radio Group Release Notes
2.10.0
Changed
- For touch devices:
- Increase tap size of
.slds-radio__label
to$height-tappable
(2.75rem) - Increase the size of the faux radio element to
$square-tappable-x-small
(1.5rem) - Let the label text inherit its
font-size
from the body
- Increase tap size of
2.7.0
Added
- Added an example of a checked-and-disabled radio button.