Radio button

Radio buttons are used to select a single item in a list of options.

Examples

Stacked

Group radio buttons in chi-form__item for easy stacking.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio1">
      <label class="chi-radio__label" for="radio1">Radio Button</label>
    </div>
  </div>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio2" disabled>
      <label class="chi-radio__label" for="radio2">Disabled Radio Button</label>
    </div>
  </div>
</fieldset>

Inline

Apply -inline to display two or more radio buttons inline.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-form__item -inline">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="inlineRadios" id="inlineRadio1">
      <label class="chi-radio__label" for="inlineRadio1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item -inline">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="inlineRadios" id="inlineRadio2" disabled>
      <label class="chi-radio__label" for="inlineRadio2">Option 2</label>
    </div>
  </div>
</fieldset>

Radio Button List

Radio button lists are used to wrap a series of radio buttons in a list. To render a series of radio buttons in a list, apply the class -list to chi-form__item.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <ul class="chi-form__item -list">
    <li class="chi-form__item">
      <div class="chi-radio">
        <input type="radio" class="chi-radio__input" name="radiobuttonList" id="radio1">
        <label class="chi-radio__label" for="radio1">Option 1</label>
      </div>
    </li>
    <li class="chi-form__item">
      <div class="chi-radio">
        <input type="radio" class="chi-radio__input" name="radiobuttonList" id="radio2">
        <label class="chi-radio__label" for="radio2">Option 2</label>
      </div>
    </li>
    <li class="chi-form__item">
      <div class="chi-radio">
        <input type="radio" class="chi-radio__input" name="radiobuttonList" id="radio3">
        <label class="chi-radio__label" for="radio3">Option 3</label>
      </div>
    </li>
    <li class="chi-form__item">
      <div class="chi-radio">
        <input type="radio" class="chi-radio__input" name="radiobuttonList" id="radio4">
        <label class="chi-radio__label" for="radio4">Option 4</label>
      </div>
    </li>
    <li class="chi-form__item">
      <div class="chi-radio">
        <input type="radio" class="chi-radio__input" name="radiobuttonList" id="radio5">
        <label class="chi-radio__label" for="radio5">Option 5</label>
      </div>
    </li>
  </ul>
</fieldset>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon