BETA This is a new service — your feedback will help us to improve it.

Back to components

Fieldset

Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.

Any general text which is important for filling in the form and cannot be put into a hint, should be in that legend (as shown in the checkbox example). But the legend shouldn't be too long either.

Example

What bins do you currently have?

Select all that apply

What bins do you currently have?

HTML Snippet for fieldset

<h1 class="heading-medium">What bins do you currently have?</h1>
<p>Select all that apply</p>
<form>
    <div class="form-group">
        <fieldset>
            <legend class="sr-only">What bins do you currently have?</legend>
            <label class="block-label" for="waste-type-1" data-target="waste-type-1">
                <input type="checkbox" id="waste-type-1" name="waste-types" value="Black bin (General waste)" aria-controls="waste-type-1" aria-expanded="false">
                Black bin (General waste)
            </label>
            <label class="block-label" for="waste-type-2" data-target="waste-type-2">
                <input type="checkbox" id="waste-type-2" name="waste-types" value="Brown bin (Garden waste)" aria-controls="waste-type-2" aria-expanded="false">
                Brown bin (Garden waste)
            </label>
            <label class="block-label" for="waste-type-3" data-target="waste-type-3">
                <input type="checkbox" id="waste-type-3" name="waste-types" value="Green bin (Recycling)" aria-controls="waste-type-3" aria-expanded="false">
                Green bin (Recycling)
            </label>
        </fieldset>
    </div>
</form>
Back to top