Radio
Radio inputs allow users to select exactly one option from a number of choices. Radio inputs are generally displayed in a radio group.
Usage
<div class="c-radio">
<input class="c-radio__input" type="radio" id="radio" name="radio" value="radio_3" />
<label class="c-radio__label" for="radio">Default radio</label>
</div>Implementation
| Type | Class | |
|---|---|---|
| Elements | ||
| Wrapper | .c-radio | |
| Input | input.c-radio__input | |
| Label | label.c-radio__label | Optional |
| Description | .c-radio__description | Optional |
| Error message | .c-radio__error | Optional |
| Modifiers | None | |
| States | None | |
| Disabled | disabled |
Elements
With Description
Use .c-radio__description to add an explanation to this specific radio input element.
This is a description
<div class="c-radio">
<input class="c-radio__input" type="radio" id="radio_02" name="radio" value="radio_3" />
<label class="c-radio__label" for="radio_02">Option</label>
<p class="c-radio__description">This is a description</p>
</div>With Error
Use .c-radio__error to display error message that are specific to this radio input element, not the whole radio group.
This is an error
<div class="c-radio">
<input class="c-radio__input" type="radio" id="radio_03" name="radio" value="radio_3" />
<label class="c-radio__label" for="radio_03">Option</label>
<p class="c-radio__error">This is an error</p>
</div>States
Disabled
Add disabled to the input element if it's disabled.
<div class="c-radio">
<input class="c-radio__input" type="radio" id="radio" name="radio_04" value="radio_3" disabled />
<label class="c-radio__label" for="radio_04">Disabled</label>
</div>