Radio buttons allow selection of one of multiple options.
<form class="o-form">
<div class="o-form__item">
<div class="o-radio">
<input type="radio" name="Radio" id="radio_single" value="radio">
<label for="radio_single">Label</label>
</div>
</div>
</form>
<form class="o-form">
<div class="o-form__item">
<div class="o-radio-group">
<div class="o-radio-group__label">Group label</div>
<div class="o-radio">
<input type="radio" name="Radio" id="radio_1" value="radio_1">
<label for="radio_1">First label</label>
</div>
<div class="o-radio">
<input type="radio" name="Radio" id="radio_2" value="radio_2">
<label for="radio_2">Second label</label>
</div>
<div class="o-radio">
<input type="radio" name="Radio" id="radio_3" value="radio_3">
<label for="radio_3">Third label</label>
</div>
<div class="o-radio">
<input type="radio" name="Radio" disabled="disabled" id="radio_4" value="radio_4">
<label for="radio_4">Fourth label</label>
</div>
</div>
<div class="o-form__description">Description</div>
</div>
</form>
Attribute | Description | Possible values | Type | Required | Default |
---|---|---|---|---|---|
disabled | Set with disabled on input | disabled | string | - | - |
checked | Set with checked on input | checked | string | - | - |