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.

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__label"> First Name </label>
White
Light
Dark
Black
open-new 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>
White
Light
Dark
Black
open-new 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.

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<input class="mds-form__input" type="text">
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<input class="mds-form__input" type="text" disabled>
White
Light
Dark
Black
open-new 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.

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<textarea class="mds-form__textarea"></textarea>
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<textarea class="mds-form__textarea" disabled></textarea>
White
Light
Dark
Black
open-new 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.

Select (Dropdown)

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

caret-down--s
White
Light
Dark
Black
open-new 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-labelledby="title">
            <title>caret-down--s</title>
            <use xlink:href="/assets/icons/mds_icons.svg#caret-down--s"></use>
        </svg>
    </span>
</div>
caret-down--s
White
Light
Dark
Black
open-new 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-labelledby="title">
            <title>caret-down--s</title>
            <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.

Checkbox

Use when affording a binary selection.

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__checkbox" for="i-accept-the-terms-and-conditions.--4323">
    <input id="i-accept-the-terms-and-conditions.--4323" type="checkbox" class="mds-form__checkbox-input" />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                <title>check--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                <title>minus--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions. </span>
    </span>
</label>
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__checkbox mds-form__checkbox--disabled" for="i-accept-the-terms-and-conditions.--47559">
    <input id="i-accept-the-terms-and-conditions.--47559" type="checkbox" class="mds-form__checkbox-input" disabled />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                <title>check--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                <title>minus--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions. </span>
    </span>
</label>
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__checkbox" for="i-accept-the-terms-and-conditions.--66786">
    <input id="i-accept-the-terms-and-conditions.--66786" type="checkbox" class="mds-form__checkbox-input" checked />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                <title>check--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                <title>minus--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions. </span>
    </span>
</label>
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__checkbox mds-form__checkbox--disabled" for="i-accept-the-terms-and-conditions.--82193">
    <input id="i-accept-the-terms-and-conditions.--82193" type="checkbox" class="mds-form__checkbox-input" checked disabled />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                <title>check--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                <title>minus--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> I accept the terms and conditions. </span>
    </span>
</label>
  • Reflects the affirmative (“yes” or “true”) of its label when checked.
  • Follows the same :hover and :active conventions as the primary Button when checked.
  • Include the label in the checkbox's clickable target area.
  • Never use to turn functionality on and off. Instead, use a Switch.

Editorial

  • Use full sentences with punctuation.
  • If user is consenting to something, start the sentence with “I”, and also run the phrasing you choose by compliance.

Checkbox Group

Select statistics to view.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<fieldset class="mds-form__checkbox-group" role="group">
    <legend class="mds-form__checkbox-group-label"> Select statistics to view. </legend>
    <label class="mds-form__checkbox" for="average--11337">
        <input id="average--11337" type="checkbox" class="mds-form__checkbox-input" />
        <span class="mds-form__checkbox-visible-wrap">
            <span class="mds-form__checkbox-visual">
                <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                    <title>check--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                </svg>
                <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                    <title>minus--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                </svg>
            </span>
            <span class="mds-form__checkbox-text"> Average </span>
        </span>
    </label>
    <label class="mds-form__checkbox" for="minimum--31830">
        <input id="minimum--31830" type="checkbox" class="mds-form__checkbox-input" />
        <span class="mds-form__checkbox-visible-wrap">
            <span class="mds-form__checkbox-visual">
                <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                    <title>check--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                </svg>
                <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                    <title>minus--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                </svg>
            </span>
            <span class="mds-form__checkbox-text"> Minimum </span>
        </span>
    </label>
    <label class="mds-form__checkbox" for="maximum--7426">
        <input id="maximum--7426" type="checkbox" class="mds-form__checkbox-input" />
        <span class="mds-form__checkbox-visible-wrap">
            <span class="mds-form__checkbox-visual">
                <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                    <title>check--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                </svg>
                <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                    <title>minus--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                </svg>
            </span>
            <span class="mds-form__checkbox-text"> Maximum </span>
        </span>
    </label>
    <label class="mds-form__checkbox" for="medium--17818">
        <input id="medium--17818" type="checkbox" class="mds-form__checkbox-input" />
        <span class="mds-form__checkbox-visible-wrap">
            <span class="mds-form__checkbox-visual">
                <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                    <title>check--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                </svg>
                <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                    <title>minus--s</title>
                    <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                </svg>
            </span>
            <span class="mds-form__checkbox-text"> Medium </span>
        </span>
    </label>
</fieldset>
Select statistics to view.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group mds-form__field-group--horizontal">
    <fieldset class="mds-form__checkbox-group" role="group">
        <legend class="mds-form__checkbox-group-label"> Select statistics to view. </legend>
        <label class="mds-form__checkbox" for="average--37082">
            <input id="average--37082" type="checkbox" class="mds-form__checkbox-input" />
            <span class="mds-form__checkbox-visible-wrap">
                <span class="mds-form__checkbox-visual">
                    <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                        <title>check--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                    </svg>
                    <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                        <title>minus--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                    </svg>
                </span>
                <span class="mds-form__checkbox-text"> Average </span>
            </span>
        </label>
        <label class="mds-form__checkbox" for="minimum--37598">
            <input id="minimum--37598" type="checkbox" class="mds-form__checkbox-input" />
            <span class="mds-form__checkbox-visible-wrap">
                <span class="mds-form__checkbox-visual">
                    <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                        <title>check--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                    </svg>
                    <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                        <title>minus--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                    </svg>
                </span>
                <span class="mds-form__checkbox-text"> Minimum </span>
            </span>
        </label>
        <label class="mds-form__checkbox" for="maximum--8191">
            <input id="maximum--8191" type="checkbox" class="mds-form__checkbox-input" />
            <span class="mds-form__checkbox-visible-wrap">
                <span class="mds-form__checkbox-visual">
                    <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                        <title>check--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                    </svg>
                    <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                        <title>minus--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                    </svg>
                </span>
                <span class="mds-form__checkbox-text"> Maximum </span>
            </span>
        </label>
        <label class="mds-form__checkbox" for="medium--89774">
            <input id="medium--89774" type="checkbox" class="mds-form__checkbox-input" />
            <span class="mds-form__checkbox-visible-wrap">
                <span class="mds-form__checkbox-visual">
                    <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                        <title>check--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                    </svg>
                    <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                        <title>minus--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                    </svg>
                </span>
                <span class="mds-form__checkbox-text"> Medium </span>
            </span>
        </label>
    </fieldset>
</div>
  • Include a label to describe the options within the group.
  • Options can be selected independently.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__checkbox" for="indeterminate-checkbox--70077">
    <input id="indeterminate-checkbox--70077" type="checkbox" class="mds-form__checkbox-input" checked />
    <span class="mds-form__checkbox-visible-wrap">
        <span class="mds-form__checkbox-visual">
            <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                <title>check--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
            </svg>
            <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                <title>minus--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
            </svg>
        </span>
        <span class="mds-form__checkbox-text"> Indeterminate checkbox </span>
    </span>
</label>
<!-- Something like the following Javascript would be required to set an indeterminate state on a checkbox -->
<script>
    document.getElementById("indeterminate-checkbox--70077").indeterminate = true;
</script>
  • Use the indeterminate variation when affording a “Select All” option. After selecting all items, the indeterminate state is triggered once an option is deselected.

Editorial

  • Use full sentences with punctuation for the checkbox group label.
  • Try to keep checkbox labels brief and start them with verbs.

Radio Button

Use to afford a single selection from two or more options.

White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__radio-button" for="peer-group--34897">
    <input id="peer-group--34897" name="undefined-basic-example" value="blue" type="radio" class="mds-form__radio-button-input" />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Peer Group </span>
    </span>
</label>
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__radio-button mds-form__radio-button--disabled" for="peer-group--31146">
    <input id="peer-group--31146" name="undefined-basic-example" value="blue" type="radio" class="mds-form__radio-button-input" disabled />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Peer Group </span>
    </span>
</label>
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__radio-button" for="choose-this-one--48666">
    <input id="choose-this-one--48666" name="radio-example-1" value="blue" type="radio" class="mds-form__radio-button-input" checked />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Choose this one </span>
    </span>
</label>
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<label class="mds-form__radio-button mds-form__radio-button--disabled" for="peer-group--5887">
    <input id="peer-group--5887" name="undefined-basic-example-checked" value="blue" type="radio" class="mds-form__radio-button-input" checked disabled />
    <span class="mds-form__radio-button-visible-wrap">
        <span class="mds-form__radio-button-visual"></span>
        <span class="mds-form__radio-button-text "> Peer Group </span>
    </span>
</label>

Radio Group

Rank Within
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<fieldset class="mds-form__radio-button-group" role="radiogroup">
    <legend class="mds-form__radio-button-group-label"> Rank Within </legend>
    <label class="mds-form__radio-button" for="your-list--98138">
        <input id="your-list--98138" name="id-48569-basic-example-checked" value="blue" type="radio" class="mds-form__radio-button-input" checked />
        <span class="mds-form__radio-button-visible-wrap">
            <span class="mds-form__radio-button-visual"></span>
            <span class="mds-form__radio-button-text "> Your List </span>
        </span>
    </label>
    <label class="mds-form__radio-button" for="peer-group--48892">
        <input id="peer-group--48892" name="id-48569-basic-example" value="blue" type="radio" class="mds-form__radio-button-input" />
        <span class="mds-form__radio-button-visible-wrap">
            <span class="mds-form__radio-button-visual"></span>
            <span class="mds-form__radio-button-text "> Peer Group </span>
        </span>
    </label>
</fieldset>
Rank Within
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group mds-form__field-group--horizontal">
    <fieldset class="mds-form__radio-button-group" role="radiogroup">
        <legend class="mds-form__radio-button-group-label"> Rank Within </legend>
        <label class="mds-form__radio-button" for="your-list--63585">
            <input id="your-list--63585" name="id-11677-basic-example-checked" value="blue" type="radio" class="mds-form__radio-button-input" checked />
            <span class="mds-form__radio-button-visible-wrap">
                <span class="mds-form__radio-button-visual"></span>
                <span class="mds-form__radio-button-text "> Your List </span>
            </span>
        </label>
        <label class="mds-form__radio-button" for="peer-group--75771">
            <input id="peer-group--75771" name="id-11677-basic-example" value="blue" type="radio" class="mds-form__radio-button-input" />
            <span class="mds-form__radio-button-visible-wrap">
                <span class="mds-form__radio-button-visual"></span>
                <span class="mds-form__radio-button-text "> Peer Group </span>
            </span>
        </label>
    </fieldset>
</div>
  • Use when seeing all available options is critical. If the options are secondary in importance, consider using the select form element.
  • When possible, use the stacked variation. Options are harder to differentiate within the horizontal group.
  • If selecting no option is a viable choice, include a radio button within the group with an appropriate label, i.e. “None”.
  • A selected radio button follows the same :hover and :active conventions as the primary Button.
  • A radio button’s label is part of the clickable area of the control.
  • Generally, the first option in the radio group should be selected by default. If preselection of an option can result in incorrect assumptions, i.e., “Male” or “Female”, then no option should be selected by default.

Editorial

  • For the radio group label, use full sentences with punctuation.
  • Try to keep radio button labels brief and start them with verbs.

Required-Fields Key

Use to describe the required-field indicator symbol.

Required fields
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<form class="mds-form" method="post" action="form/processor">
    <span class="mds-form__required-fields-key">Required fields</span>
    <div class="mds-form__field-group">
        <label class="mds-form__label" for="required-first-name"> 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>
        <input class="mds-form__input" type="text" id="required-first-name"> </div>
</form>

Errors

Use to indicate form elements with invalid or missing entries, including a description of the error.

This is placeholder error messaging.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group mds-form--error">
    <label class="mds-form__label" for="error-first-name"> 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>
    <input class="mds-form__input" type="text" id="error-first-name" aria-describedby="first-name-error">
    <span class="mds-form__field-error" id="first-name-error" role="alert">
        <span class="mds-form__field-error-text"> This is placeholder error messaging. </span>
    </span>
</div>
This is placeholder error messaging.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group mds-form--error">
    <label class="mds-form__label" for="error-textarea"> Comments
        <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>
    <textarea class="mds-form__textarea" id="error-textarea" aria-describedby="textarea-error"></textarea>
    <span class="mds-form__field-error" id="textarea-error" role="alert">
        <span class="mds-form__field-error-text"> This is placeholder error messaging. </span>
    </span>
</div>
caret-down--s
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group mds-form--error">
    <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-labelledby="title">
                <title>caret-down--s</title>
                <use xlink:href="/assets/icons/mds_icons.svg#caret-down--s"></use>
            </svg>
        </span>
    </div>
</div>
Select one or more statistics to view. Required Field. You must select at least one statistic.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group mds-form--error">
    <fieldset class="mds-form__checkbox-group" role="group">
        <legend class="mds-form__checkbox-group-label"> Select one or more statistics to view.
            <abbr class="mds-form__label-required-indicator" title="Please select at least one option." aria-hidden="true">*</abbr>
            <span class="mds-screenreader-only">Required Field.</span>
        </legend>
        <label class="mds-form__checkbox" for="average--37280">
            <input id="average--37280" type="checkbox" class="mds-form__checkbox-input" aria-describedby="checkbox-error" />
            <span class="mds-form__checkbox-visible-wrap">
                <span class="mds-form__checkbox-visual">
                    <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                        <title>check--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                    </svg>
                    <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                        <title>minus--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                    </svg>
                </span>
                <span class="mds-form__checkbox-text"> Average </span>
            </span>
        </label>
        <label class="mds-form__checkbox" for="minimum--53684">
            <input id="minimum--53684" type="checkbox" class="mds-form__checkbox-input" aria-describedby="checkbox-error" />
            <span class="mds-form__checkbox-visible-wrap">
                <span class="mds-form__checkbox-visual">
                    <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                        <title>check--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                    </svg>
                    <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                        <title>minus--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                    </svg>
                </span>
                <span class="mds-form__checkbox-text"> Minimum </span>
            </span>
        </label>
        <label class="mds-form__checkbox" for="maxiumum--58537">
            <input id="maxiumum--58537" type="checkbox" class="mds-form__checkbox-input" aria-describedby="checkbox-error" />
            <span class="mds-form__checkbox-visible-wrap">
                <span class="mds-form__checkbox-visual">
                    <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                        <title>check--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                    </svg>
                    <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                        <title>minus--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                    </svg>
                </span>
                <span class="mds-form__checkbox-text"> Maxiumum </span>
            </span>
        </label>
        <label class="mds-form__checkbox" for="medium--60756">
            <input id="medium--60756" type="checkbox" class="mds-form__checkbox-input" aria-describedby="checkbox-error" />
            <span class="mds-form__checkbox-visible-wrap">
                <span class="mds-form__checkbox-visual">
                    <svg class="mds-icon mds-form__checkbox-checked-icon" aria-labelledby="title">
                        <title>check--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#check--s"></use>
                    </svg>
                    <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-labelledby="title">
                        <title>minus--s</title>
                        <use xlink:href="/assets/icons/mds_icons.svg#minus--s"></use>
                    </svg>
                </span>
                <span class="mds-form__checkbox-text"> Medium </span>
            </span>
        </label>
        <span class="mds-form__field-error" id="checkbox-error" role="alert">
            <span class="mds-form__field-error-text"> You must select at least one statistic. </span>
        </span>
    </fieldset>
</div>
Select what you would like to rank within. Required Field. You must choose an option.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group mds-form--error">
    <fieldset class="mds-form__radio-button-group" role="radiogroup">
        <legend class="mds-form__radio-button-group-label"> Select what you would like to rank within.
            <abbr class="mds-form__label-required-indicator" title="Please select an option." aria-hidden="true">*</abbr>
            <span class="mds-screenreader-only">Required Field.</span>
        </legend>
        <label class="mds-form__radio-button" for="your-list--76682">
            <input id="your-list--76682" name="group-name" value="blue" type="radio" class="mds-form__radio-button-input" aria-describedby="radio-button-error-message" />
            <span class="mds-form__radio-button-visible-wrap">
                <span class="mds-form__radio-button-visual"></span>
                <span class="mds-form__radio-button-text "> Your List </span>
            </span>
        </label>
        <label class="mds-form__radio-button" for="peer-group--86942">
            <input id="peer-group--86942" name="group-name" value="blue" type="radio" class="mds-form__radio-button-input" aria-describedby="radio-button-error-message" />
            <span class="mds-form__radio-button-visible-wrap">
                <span class="mds-form__radio-button-visual"></span>
                <span class="mds-form__radio-button-text "> Peer Group </span>
            </span>
        </label>
        <span class="mds-form__field-error" id="radio-button-error-message" role="alert">
            <span class="mds-form__field-error-text"> You must choose an option. </span>
        </span>
    </fieldset>
</div>
  • Never account for the space an error message may occupy in your layout. Instead, the error message should push the elements below down to make room.

Editorial

  • Use full sentences with punctuation for error description.
  • Acknowledge what is keeping a user from proceeding, but don’t make them feel like they did something wrong.
  • If we are the reason they can’t proceed, apologize.
  • Provide a user at least one way to resolve the problem.
  • If an error has the potential to repeat, tell a user what they should do, i.e., “If the site continues to not recognize your account, email us at [email protected].”

Microcopy

Augment a label to describe a form element in greater detail.

Your password must contain a letter and a number.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group">
    <label class="mds-form__label" for="password-with-microcopy"> Password </label>
    <span class="mds-form__microcopy" id="password-help-text"> Your password must contain a letter and a number. </span>
    <input class="mds-form__input" type="password" id="password-with-microcopy" aria-describedby="password-help-text"> </div>
Your password must contain a letter and a number.
White
Light
Dark
Black
open-new Copy to Clipboard Press Ctrl + C to copy 
<div class="mds-form__field-group">
    <label class="mds-form__label" for="password-with-microcopy"> Password </label>
    <input class="mds-form__input" type="password" id="password-with-microcopy" aria-describedby="password-help-text">
    <span class="mds-form__microcopy" id="password-help-text"> Your password must contain a letter and a number. </span>
</div>

Editorial

  • Use full sentences with punctuation.
  • Aim for no more than two sentences.

Guidelines

Accessibility

  • Always include a label with each form element.
  • Include a for attribute on each label with a value matching the id attribute on the corresponding input, textarea or select.
  • Use placeholder text to provide an example of the type of input you need from the user. For example, if you need a phone number in a certain format, include xxx-xxx-xxxx as placeholder text.
  • Never use placeholder text in place of a label.
  • Include an aria-describedby attribute on each input, textarea, or select that has an .mds-form__microcopy or an .mds-form__field-error component providing additional information. The value of the aria-describedby attribute must match the id attribute on the .mds-form__microcopy or .mds-form__field-error component.
  • Always include role=alert on .mds-form__field-error components.

Code Reference

CSS Class References

Class Applies to Outcome

.mds-form__field-group--horizontal

.mds-form__field-group

Changes the layout of form fields from vertical to horizontal.

.mds-form--error

.mds-form__input
.mds-form__textarea
.mds-form__select

Applies the MDS form error styles to input, textarea, and select.

.mds-form__input--small

.mds-form__input

Decreases padding and font size for an input.

.mds-form__input--large

.mds-form__input

Increases padding and font size for an input.

.mds-form__textarea--small

.mds-form__textarea

Decreases padding and font size for a textarea.

.mds-form__textarea--large

.mds-form__textarea

Increases padding and font size for a textarea.

.mds-form__select--small

.mds-form__select

Decreases padding and font size for a select.

.mds-form__select--large

.mds-form__select

Increases padding and font size for a select.
©2017 Morningstar, Inc. All rights reserved. Terms of Use