Labels and legends
Labels and legends are used to help users understand the meaning of a form input. Legends are used exclusively for fieldsets.
Types
Basic label
HTML code snippet
<label class="a-label">
A basic label
</label>Specs
Basic label
- Avenir Next Medium, 18 px, Black (#101820)
- Positioned above the input field, left aligned
- Margin bottom: 10 px
Label heading
HTML code snippet
<label class="a-label a-label__heading">
Label heading
</label>
<input class="a-text-input" type="text">Specs
Label heading styles
- Avenir Next Medium, 18 px, Black (#101820)
- Positioned above the input field, left aligned
- Margin bottom: 10 px
Inline label
HTML code snippet
<div class="m-form-field m-form-field__checkbox">
<input class="a-checkbox" type="checkbox" id="test_checkbox">
<label class="a-label" for="test_checkbox">Inline label</label>
</div>Specs
Inline label
- Avenir Next Regular, 16 px, Black (#101820)
- Positioned to the right of the input field, inline
Basic legend
The legend serves as the heading for a fieldset.
HTML code snippet
<fieldset class="o-form_fieldset">
<legend class="a-legend">Basic legend
</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>
</fieldset>Specs
Legend
- Avenir Next Medium, 18 px, Black (#101820)
- Positioned above a group of input fields, left aligned