radio-group

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.

Mobile

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, radio groups will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor.

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 the appropriate context. 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.

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">

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">

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">

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>

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>

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>