Form
Radio buttons
This component is the component for a form field with multiple radio elements.
Elements
This component is composed of two elements:
radiosthe wrapper- its child
radioelements
- its child
You can wrap it inside an input component (see input components) when used as a form field. The radios class is associated with input__control.
inputthe wrapperinput__labelfield labelinput__noticeoptional notice (which can also be used to display error messages)input__control radiosthe component
<div class="input">
<legend class="input__label">Label</legend>
<div class="input__control radios">
<div class="radio">
<input type="radio" name="example" id="example_1" value="example_1" class="radio__control" />
<label for="example_1" class="radio__label">Radio 1</label>
</div>
<div class="radio">
<input type="radio" name="example" id="example_2" value="example_2" class="radio__control" />
<label for="example_2" class="radio__label">Radio 2</label>
</div>
</div>
</div>Properties
Add classes to the wrapper class to change the style of the component.
Direction
Change the direction of the component.
class="radios"
Default
class="radios radios--portrait"
Disabled
When used as a form field, you can add the input--disabled to the wrapper like you would for an input component to disable the whole field.
class="input select input--disabled"
Required
When used as a form field, you can add the input--required to the wrapper like you would for an input component.
class="input select input--required"