Patterns

2.3.2

Checkboxes

Options
<fieldset><legend class="mb-1">Options</legend><label class="checkbox" for="option-a"><input id="option-a" name="option-a" type="checkbox" value="option-a" /><span class="checkbox__label">Option A</span></label><label class="checkbox" for="option-b"><input id="option-b" name="option-b" type="checkbox" value="option-b" /><span class="checkbox__label">Option B</span></label></fieldset>

A styled checkbox 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="checkbox error" for="option-c"><input id="option-c" name="option-c" type="checkbox" value="option-c" /><span class="checkbox__label">Option C</span></label><label class="checkbox error" for="option-d"><input id="option-d" name="option-d" type="checkbox" value="option-d" /><span class="checkbox__label">Option D</span></label></fieldset>

Error