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

Latest Updates

Page last edited:
Show all details
Edit page