Radio button
Examples
Base
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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
.
<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>