Forms

Forms gather information from users via inputs, such as text boxes, text areas, selects, checkboxes, and radio buttons. Labels sit atop these inputs.

Variations

Label

Use to describe a form input and indicate whether the input is required or optional.

Default

First Name

White Light Dark Black

<label class="mds-form__label"> First Name </label>

Required

First Name Required Field.

White Light Dark Black

<label class="mds-form__label"> First Name
    <abbr class="mds-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
    <span class="mds-form__label-required-indicator-label">Required Field.</span>
</label>

Optional

First Name (Optional)

White Light Dark Black

<label class="mds-form__label"> First Name
    <span class="mds-form__label-optional"> (Optional) </span>
</label>

Editorial

Use title case.
Clearly written labels should eliminate the need for placeholder text in text boxes and text areas.

Text Box

Use to solicit a short, single line of text or a number.

Default

Hover

Focus

White Light Dark Black

<input class="mds-form__input" type="text">

Disabled

White Light Dark Black

<input class="mds-form__input" type="text" disabled>

With Placeholder

White Light Dark Black

<input class="mds-form__input" type="text" placeholder="First Name">

Use when the user must enter a name, email address, phone number, street address, age, salary, etc.
Never use for multiple lines of text. Instead, use a text area.
Never use to perform a search. Instead, use a Search Field.
Avoid using placeholder text by making sure the label above the text box is clear. If you still need additional instructional context, consider a Tooltip next to the label header or microcopy under the label, so the helper content doesn’t disappear when a user starts typing.
Placeholder text disappears when a user types in the input. If a user doesn’t enter a value and moves to another part of a form, the placeholder text should reappear in the former text box.
In IE11, placeholder text is cleared on focus. This is default IE11 behavior and a known issue, teams are still encouraged to use text boxes in production.

Editorial

Placeholder text should be active. Start the text with a verb.
Don’t end placeholder text in text boxes with a period.
Use title case for placeholder text.

Text Area

Use when soliciting multiple lines of text.

Default

White Light Dark Black

<textarea class="mds-form__textarea"></textarea>

Disabled

White Light Dark Black

<textarea class="mds-form__textarea" disabled></textarea>

With Placeholder

White Light Dark Black

<textarea class="mds-form__textarea" placeholder="Tell us more here..."></textarea>

Never use for short, single lines of text. Instead, use a text box.
Include placeholder text to indicate what information belongs in the text area. Placeholder text disappears when the user types in the text area. If the user doesn’t enter a value and moves to another part of a form, the placeholder text should reappear in the former text box.
In IE11, placeholder text is cleared on focus. This is default IE11 behavior and a known issue, teams are still encouraged to use text areas in production.

Editorial

Placeholder text in text areas should be full sentences with punctuation.
Don’t use title case here.

Use when affording a single selection from a predefined list of options.

Default

White Light Dark Black

<div class="mds-form__select">
    <select class="mds-form__select-input">
        <option class="mds-form__select-option" value="">Select an Expense Type</option>
        <option class="mds-form__select-option" value="vacation">Vacation</option>
        <option class="mds-form__select-option" value="public_college">Public College</option>
        <option class="mds-form__select-option" value="private_college">Private College</option>
        <option class="mds-form__select-option" value="medical">Medical</option>
    </select>
    <div class="mds-form__select-visual-wrap"></div>
    <span class="mds-form__select-open-indicator">
        <svg class="mds-icon mds-form__select-open-icon" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#caret-down--s"> </use>
        </svg>
    </span>
</div>

Disabled

White Light Dark Black

<div class="mds-form__select">
    <select class="mds-form__select-input" disabled>
        <option class="mds-form__select-option" value="">Select an Expense Type</option>
        <option class="mds-form__select-option" value="vacation">Vacation</option>
        <option class="mds-form__select-option" value="public_college">Public College</option>
        <option class="mds-form__select-option" value="private_college">Private College</option>
        <option class="mds-form__select-option" value="medical">Medical</option>
    </select>
    <div class="mds-form__select-visual-wrap"></div>
    <span class="mds-form__select-open-indicator">
        <svg class="mds-icon mds-form__select-open-icon" aria-hidden="true">
            <use xlink:href="/icons/mds.svg#caret-down--s"> </use>
        </svg>
    </span>
</div>

Always display a user’s selected option after a choice is made.
Never use for a list of options exceeding 10 items. Instead, use a Combo Box.
Never use for a list of only two options. Instead, use a radio group or a Switch.

Editorial

Display either “Select an Option” or no text at all as the default selected option.
Start the text with a verb.
Don’t end text in a select with a period.
Keep option names as brief as possible - aim for under 5 words.
Use title case.