<fieldset class="radio radio--required" aria-required="true">
<legend>Radio Buttons</legend>
<ul>
<li>
<label for="input405ope1kllpc7p55">
<input id="input405ope1kllpc7p55" name="radio" type="radio" checked="checked">
Radio Item One
</label>
</li>
<li>
<label for="input405ope1kllpc7p56">
<input id="input405ope1kllpc7p56" name="radio" type="radio" >
Radio Item Two
</label>
</li>
<li>
<label for="input405ope1kllpc7p57">
<input id="input405ope1kllpc7p57" name="radio" type="radio" >
Radio Item Three is remarkably long and will probably wrap on some screens if they are small enough
</label>
</li>
<li>
<label for="input405ope1kllpc7p58">
<input id="input405ope1kllpc7p58" name="radio" type="radio" >
Radio Item Four
</label>
</li>
</ul>
</fieldset>
{% if radio is not empty %}
<fieldset class="radio {{ radio.variant }}"{% if radio.required %} aria-required="true"{% endif %}{% if radio.disabled %} disabled="disabled"{% endif %}>
<legend>{{ radio.legend }}</legend>
<ul>
{% for item in radio.items %}
{% set input_id = 'input'|uniqid %}
<li>
<label for="{{ input_id }}">
<input id="{{ input_id }}" name="radio" type="radio" {% if item.checked %}checked="checked"{% endif %}>
{{ item.label }}
</label>
</li>
{% endfor %}
</ul>
</fieldset>
{% endif %}
{
"radio": {
"legend": "Radio Buttons",
"items": [
{
"label": "Radio Item One",
"checked": true
},
{
"label": "Radio Item Two"
},
{
"label": "Radio Item Three is remarkably long and will probably wrap on some screens if they are small enough"
},
{
"label": "Radio Item Four"
}
],
"variant": "radio--required",
"required": true
}
}
fieldset.radio {
@include fieldgroup;
}
These radio buttons can be used in forms to collect data. They are not intended to be used as a standalone pattern. The required, disabled, error, and valid states are provided to be applied to radio buttons by form applications as needed.