Patterns

2.3.2

Radios

Options
<fieldset><legend class="mb-1">Options</legend><label class="radio" for="option-1"><input id="option-1" name="options" type="radio" value="option-1" /><span class="radio__label">Option 1</span></label><label class="radio" for="option-2"><input id="option-2" name="options" type="radio" value="option-2" /><span class="radio__label">Option 2</span></label></fieldset>

A styled radio element. Styling of the element is determined by the Color Combination utility it is nested under. Note the <fieldset> and <legend> used for making the form more understandable for all users. Read more about form grouping in W3’s Web Accessibility Tutorials.

Options
<fieldset><legend class="mb-1">Options</legend><label class="radio error" for="option-3"><input id="option-3" name="options" type="radio" value="option-3" /><span class="radio__label">Option 3</span></label><label class="radio error" for="option-4"><input id="option-4" name="options" type="radio" value="option-4" /><span class="radio__label">Option 4</span></label></fieldset>

Error