Radio Button Group

Radio Button Group

A styled select list that can have a single entry checked at any one time.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<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">
      <span class="slds-button slds-radio_button">
        <input type="radio" name="radio" id="monday" />
        <label class="slds-radio_button__label" for="monday">
          <span class="slds-radio_faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-radio_button">
        <input type="radio" name="radio" id="tuesday" />
        <label class="slds-radio_button__label" for="tuesday">
          <span class="slds-radio_faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-radio_button">
        <input type="radio" name="radio" id="wednesday" />
        <label class="slds-radio_button__label" for="wednesday">
          <span class="slds-radio_faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-radio_button">
        <input type="radio" name="radio" id="thursday" />
        <label class="slds-radio_button__label" for="thursday">
          <span class="slds-radio_faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-radio_button">
        <input type="radio" name="radio" id="friday" />
        <label class="slds-radio_button__label" for="friday">
          <span class="slds-radio_faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>

Overview of CSS Classes

Selector.slds-radio_button-group
Summary

Initializes radio button

Restrict.slds-form-element div
VariantTrue
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