CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Radio button

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

Examples

Base

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-form__item -mb--1">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-ba1">
      <label class="chi-radio__label" for="radio-ba1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-ba2">
      <label class="chi-radio__label" for="radio-ba2">Option 2</label>
    </div>
  </div>
</fieldset>

Checked

Use the checked boolean attribute to set the default value of a radio button input to true.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-form__item -mb--1">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-ch1" checked>
      <label class="chi-radio__label" for="radio-ch1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-ch2">
      <label class="chi-radio__label" for="radio-ch2">Option 2</label>
    </div>
  </div>
</fieldset>

Disabled

Use the disabled boolean attribute to prevent users from interacting with an input. Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus.

Select an option
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-form__item -mb--1">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-di1" disabled>
      <label class="chi-radio__label" for="radio-di1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item -mb--1">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-di2">
      <label class="chi-radio__label" for="radio-di2">Option 2</label>
    </div>
  </div>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-di3">
      <label class="chi-radio__label" for="radio-di3">Option 3</label>
    </div>
  </div>
</fieldset>

Required

Use the required boolean attribute to indicate which radio buttons must be completed before submitting a form.

Select an option*
<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__required" aria-label="Required field">*</abbr>
  </legend>
  <div class="chi-form__item -mb--1">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-re1" required>
      <label class="chi-radio__label" for="radio-re1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-re2">
      <label class="chi-radio__label" for="radio-re2">Option 2</label>
    </div>
  </div>
</fieldset>

Optional

Use optional to help emphasize a group of radio button options are not required and can be skipped.

Select an option(optional)
<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__optional" aria-label="Optional field">(optional)</abbr>
  </legend>
  <div class="chi-form__item -mb--1">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-op1">
      <label class="chi-radio__label" for="radio-op1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-op2">
      <label class="chi-radio__label" for="radio-op2">Option 2</label>
    </div>
  </div>
</fieldset>

Help

Use chi-label__help to include a help icon that displays helpful information about an input in a popover. A help icon must be contained within an icon button to ensure it receives focus when a user tabs through a form.

Select an option
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<fieldset>
  <div class="chi-label__wrapper">
    <legend class="chi-label">Select an option</legend>
    <div class="chi-label__help">
      <button class="chi-button -icon -xs -flat" id="example__help-button" aria-label="Help" data-target="#example__help-popover">
        <i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
      </button>
      <section class="chi-popover chi-popover--top -animated" id="example__help-popover" aria-modal="true" role="dialog" aria-hidden="true" x-placement="top">
        <div class="chi-popover__content">
          <p class="chi-popover__text">Helpful information goes here.</p>
        </div>
      </section>
    </div>
  </div>
  <div class="chi-form__item -mb--1">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-he1">
      <label class="chi-radio__label" for="radio-he1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-he2">
      <label class="chi-radio__label" for="radio-he2">Option 2</label>
    </div>
  </div>
</fieldset>

<script>chi.popover(document.getElementById('example__help-button'));</script>

Error

Use the -danger state to provide feedback to users when a selection has not been made. Once a selection has been made, the state must be removed. To meet accessibility requirements, danger inputs must include an error message explaining the failure and/or how to correct it.

Select an option*
Please select an option.
<fieldset>
  <legend class="chi-label">
    Select an option
    <abbr class="chi-label__required" aria-label="Required field">*</abbr>
  </legend>
  <div class="chi-form__item -mb--1">
    <div class="chi-radio">
      <input class="chi-radio__input -danger" type="radio" name="radios" id="radio-er1" required>
      <label class="chi-radio__label" for="radio-er1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item">
    <div class="chi-radio">
      <input class="chi-radio__input -danger" type="radio" name="radios" id="radio-er2">
      <label class="chi-radio__label" for="radio-er2">Option 2</label>
    </div>
  </div>
  <div class="chi-label -status -danger">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    Please select an option.
  </div>
</fieldset>

Layout Variations

Inline

Apply -inline to display two or more radio buttons in one row.

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="radios" id="radio-in1">
      <label class="chi-radio__label" for="radio-in1">Option 1</label>
    </div>
  </div>
  <div class="chi-form__item -inline">
    <div class="chi-radio">
      <input class="chi-radio__input" type="radio" name="radios" id="radio-in2" disabled>
      <label class="chi-radio__label" for="radio-in2">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