Radio Button
Examples
Stacked
Group radio buttons in chi-form__item
for easy stacking.
<fieldset>
<legend class="chi-label">Select an option</legend>
<div class="chi-form__item">
<div class="chi-radio">
<input class="chi-radio__input" type="radio" name="radios" id="radio1">
<label class="chi-radio__label" for="radio1">Radio Button</label>
</div>
</div>
<div class="chi-form__item">
<div class="chi-radio">
<input class="chi-radio__input" type="radio" name="radios" id="radio2" disabled>
<label class="chi-radio__label" for="radio2">Disabled Radio Button</label>
</div>
</div>
</fieldset>
Inline
Apply -inline
to display two or more radio buttons inline.
<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="inlineRadios" id="inlineRadio1">
<label class="chi-radio__label" for="inlineRadio1">Option 1</label>
</div>
</div>
<div class="chi-form__item -inline">
<div class="chi-radio">
<input class="chi-radio__input" type="radio" name="inlineRadios" id="inlineRadio2" disabled>
<label class="chi-radio__label" for="inlineRadio2">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>