Components

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">

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>

Basic legend

The legend serves as the heading for a fieldset.

Basic legend

HTML code snippet

<fieldset class="o-form__fieldset">
    <legend class="h4">
        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>

Latest Updates

Page last edited:
Show all details
Edit page