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.

Basic legend

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
Edit page