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
Label heading
HTML code snippet
<label class="a-label a-label__heading" for="label-heading-example">
Label heading
</label>
<input class="a-text-input" type="text" id="label-heading-example">
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