Fieldset

Preview
Code

<form>
    <fieldset>
        <legend>List your hobbies</legend>
        <div class="field">
            <label class="label" for="hobby1">Hobby 1</label>
            <div class="control">
                <input name="text_hobby1" id="hobby1" class="input" type="text" />
            </div>
        </div>
        <div class="field">
            <label class="label" for="hobby2">Hobby 2</label>
            <div class="control">
                <input name="text_hobby2" id="hobby2" class="input" type="text" />
            </div>
        </div>
        <div class="field">
            <label class="label" for="hobby3">Hobby 3</label>
            <div class="control">
                <input name="text_hobby3" id="hobby3" class="input" type="text" />
            </div>
        </div>
    </fieldset>
</form>

Usage

In long forms, groups of fields with a common purpose should be grouped together in a fieldset wrapper. Within the fieldset, include a legend element describing the purpose of the fieldset. Nesting fieldsets should be avoided.

The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.

Each of them should be wrapped in a .control container

When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

Use the is-medium or is-large class to create larger input elements.

Accessibility

Using <fieldset> and <legend> ensures that the text description is read to screen reader users when the grouping is navigated to.

Fieldset and legend should only be used to associate groups of controls when a higher level description is necessary. Single checkboxes or basic radio buttons (such as male/female for gender) that make sense from their labels alone do not require fieldset and legend.

If you have any questions or suggestions for improvements, please contact the Web Team.