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.
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.
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 alegend
. - 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.