Switch to WilmingtonRadio
Radios are a type of form input that allows the user to select a single option from a given list. They appear in groups of two or more but allow a single selection. To allow the user to select multiple options, use the checkbox component.
Variants
The radio button component includes a text label for each option and a transparent container outlined in gray that holds the full list of selectable options. In addition to the default state, every option has a hover state, a focus state, and a checked state. The error state takes the form of an input error component.
<div class="c-radio-group">
<div class="c-radio__container">
<input type="radio" name="default" id="option1"/>
<label for="option1">Option 1</label>
</div>
<div class="c-radio__container">
<input type="radio" name="default" id="option2"/>
<label for="option2">Option 2</label>
</div>
<div class="c-radio__container">
<input type="radio" name="default" id="option3"/>
<label for="option3">Option 3</label>
</div>
</div>
Use this variant when you need to include secondary or supplementary information to give a user further context in order to make a choice.
<div class="c-radio-group">
<div class="c-radio__container">
<input type="radio" name="subtitle" id="option1-subtitle"/>
<label for="option1-subtitle">Option 1</label>
</div>
<div class="c-radio__container">
<input type="radio" name="subtitle" id="option2-subtitle"/>
<label for="option2-container-subtitle">Option 2</label>
</div>
<div class="c-radio__container">
<input type="radio" name="subtitle" id="option3-subtitle"/>
<label for="option3-subtitle">Option 3</label>
</div>
</div>
Optionally, the last button in a radio list may contain a text input. There may only be one radio of this type in a list and it must appear after all other options to be accessible. The button itself has the same states as the default. The text input will be disabled unless the corresponding radio option is selected.
Use aria-labelledby to associate the same label on the radio with the text input.
<div class="c-radio-group">
<div class="c-radio__container">
<input type="radio" name="nested" id="option1-nested"/>
<label for="option1-nested">Option 1
<span class="c-radio__container--text">Content goes here...more content</span>
</label>
</div>
<div class="c-radio__container">
<input type="radio" name="nested" id="option2-nested"/>
<label for="option2-nested">Option 2
<span class="c-radio__container--text">Content goes here...more content</span>
</label>
</div>
<div class="c-radio__container">
<input type="radio" name="nested" id="option3-nested"/>
<label for="option3-nested">Option 3
<input type="text" name="nested" class="c-radio__container--input" disabled/>
</label>
</div>
</div>
<div class="c-radio-group">
<div class="c-radio__container">
<input
class="c-radio__input"
type="radio"
name="example3"
value="yes"
id="radio3"
/>
<label class="c-radio" for="radio3">
Yes
<span class="c-radio__button"></span>
</label>
</div>
<div class="c-radio__container">
<input
class="c-radio__input"
type="radio"
name="example3"
value="no"
id="radio4"
/>
<label class="c-radio" for="radio4">
No
<span class="c-radio__button"></span>
</label>
</div>
<div class="c-radio__container">
<input
class="c-radio__input"
type="radio"
name="example3"
value="maybe"
id="radio5"
/>
<label class="c-radio" for="radio5">
Maybe
<span class="c-radio__button"></span>
</label>
</div>
</div>
States
In addition to the default state, every radio button option has a hover state, a focus state, a selected state and an error state that affects the entire list container. The error state must be used with an input error component to guide the user in correcting the error. Use the c-radio-group--error class to apply the error state to the container.