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