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>
Web Component
Properties
Accessibility
Keyboard Navigation
Key | Function |
---|---|
Tab | Moves focus to the next focusable element |
Shift + Tab | Moves focus to the previous focusable element |
Space | Toggles the selection state of the radio button between checked and unchecked |
For comprehensive details on keyboard support for input fields, refer to our Keyboard Control Guide.
Visit WebAIM for keyboard techniques.
Find live examples in the A11y style guide.
Roles and attributes
WAI-ARIA provides a grouping role that functions similarly to fieldset and legend.
Role | Element | Usage |
---|---|---|
group | div | Identifies the div element as a group container for the radio buttons. |
Resources
- W3 Radio Button Group Example: Information about the radio button accessible behavior.
- A11y Style Guide: Gives core recommendations for the accessible radio buttons.
- W3C Forms Tutorial: Provides guidance on creating accessible forms.
Other recommendations
Explore additional accessibility tips in the general Accessibility Guide.
WCAG 2.2 Guidelines
- Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
- Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
- Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
- Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)