Components
Fieldsets
The fieldset element is used to group several controls as well as labels within a web form. A fieldset includes each of the following:
- Legend
- Block helper text (if necessary)
- Inline labels
- Set of controls such as checkboxes or radio buttons
Types
Fieldset with checkboxes
HTML code snippet
<form class="o-form">
<div class="o-form__group">
<fieldset class="o-form__fieldset">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="m-form-field m-form-field--checkbox">
<input class="a-checkbox" type="checkbox" id="test_checkbox_1" name="test_checkbox">
<label class="a-label" for="test_checkbox_1">Inline label</label>
</div>
<div class="m-form-field m-form-field--checkbox">
<input class="a-checkbox" type="checkbox" id="test_checkbox_2" name="test_checkbox">
<label class="a-label" for="test_checkbox_2">Inline label</label>
</div>
</fieldset>
</div>
</form>Fieldset with radio buttons
HTML code snippet
<form class="o-form">
<div class="o-form__group">
<fieldset class="o-form__fieldset">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="m-form-field m-form-field--radio">
<input class="a-radio" type="radio" id="test_radio_1" name="test_radio">
<label class="a-label" for="test_radio_1">Inline label</label>
</div>
<div class="m-form-field m-form-field--radio">
<input class="a-radio" type="radio" id="test_radio_2" name="test_radio">
<label class="a-label" for="test_radio_2">Inline label</label>
</div>
</fieldset>
</div>
</form>Sizes
Large target fieldset with checkboxes
HTML code snippet
<form class="o-form">
<div class="o-form__group">
<fieldset class="o-form__fieldset">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="m-form-field
m-form-field--checkbox
m-form-field--lg-target">
<input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_1">
<label class="a-label" for="test_checkbox_lg_default_1">Inline label</label>
</div>
<div class="m-form-field
m-form-field--checkbox
m-form-field--lg-target">
<input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_2">
<label class="a-label" for="test_checkbox_lg_default_2">Inline label</label>
</div>
<div class="m-form-field
m-form-field--checkbox
m-form-field--lg-target">
<input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_3">
<label class="a-label" for="test_checkbox_lg_default_3">Inline label</label>
</div>
<div class="m-form-field
m-form-field--checkbox
m-form-field--lg-target">
<input class="a-checkbox" type="checkbox" id="test_checkbox_lg_default_4">
<label class="a-label" for="test_checkbox_lg_default_4">Inline label</label>
</div>
</fieldset>
</div>
</form>Large target fieldset with radio buttons
HTML code snippet
<fieldset class="o-form__fieldset">
<legend class="h4">
Basic legend
<small class="a-label__helper a-label__helper--block">Use block helper text for instructions</small>
</legend>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_1" type="radio" name="is_helpful" value="1">
<label class="a-label" for="is_helpful_1">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_2" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_2">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_3" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_3">Inline label
</label>
</div>
<div class="m-form-field
m-form-field--radio m-form-field--lg-target">
<input class="a-radio" id="is_helpful_4" type="radio" name="is_helpful" value="0">
<label class="a-label" for="is_helpful_4">Inline label
</label>
</div>
</fieldset>