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

Copy to Clipboard Press Ctrl + C to copy

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

Required

First Name Required Field.

White Light Dark Black

Copy to Clipboard Press Ctrl + C to copy

<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-screenreader-only">Required Field.</span>
</label>

Optional

First Name (Optional)

White Light Dark Black

Copy to Clipboard Press Ctrl + C to copy

<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

Copy to Clipboard Press Ctrl + C to copy

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

Disabled

White Light Dark Black

Copy to Clipboard Press Ctrl + C to copy

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

With Placeholder

White Light Dark Black

Copy to Clipboard Press Ctrl + C to copy

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

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

Copy to Clipboard Press Ctrl + C to copy

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

Disabled

White Light Dark Black

Copy to Clipboard Press Ctrl + C to copy

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

With Placeholder

White Light Dark Black

Copy to Clipboard Press Ctrl + C to copy

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

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

Copy to Clipboard Press Ctrl + C to copy

<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="/assets/icons/mds_icons.svg#caret-down--s"> </use>
        </svg>
    </span>
</div>

Disabled

White Light Dark Black

Copy to Clipboard Press Ctrl + C to copy

<div class="mds-form__select mds-form__select-input--disabled">
    <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="/assets/icons/mds_icons.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.