Fieldset

When to use it

This component really doesn't do much. All it does is adding a little dashed border to the <fieldset> element and styles its <legend>

Code examples

<fieldset class="c-fieldset">
    <legend>Options</legend>
    <div class="c-form-control">
        <input id="id57" type="checkbox" />
        <label for="id57" class="c-label">Checkbox 1</label>
    </div>
    <div class="c-form-control">
        <input id="id58" type="checkbox" />
        <label for="id58" class="c-label">Checkbox 2</label>
    </div>
</fieldset>

Accessibility notes

When using multiple checkboxes, it's important to group them within a <fieldset> element to provide a clear and accessible structure. The <fieldset> element, along with its <legend>, helps screen readers and other assistive technologies understand the relationship between the checkboxes, making the form easier to use, for everyone.