<

Voyager

Voyager

Fieldset

A wrapper for related form fields.

A fieldset is used to group multiple input components relating to the same topic. It is also used label groups of checkboxes and radio buttons.

Fieldset label
HTML Copy

<fieldset>
    <legend>Fieldset Legend</legend>
    <div class="form-group">
        <label for="input1">Text Input 1</label>
        <input type="text" id="input1" class="form-control" value="" />
    </div>
    <div class="form-group">
        <label for="input2">Text Input 2</label>
        <input type="text" id="input2" class="form-control" value="" />
    </div>
</fieldset>
                

Implementation Notes

  • A fieldset requies a legend.
  • Do not nest fieldsets. Screenreaders do not announce the end of the fieldset, making it impossible for their users to know which fieldset a field belongs.

Labeling checkboxes and radio button groups

To style the legend of a fieldset to appear as a label, for a group of checkboxes or radio buttons, add .qw-legend-checkbox or .qw-legend-radio to the legend, respectively.

User Permissions

Comment on response is…