Field Errors

HTML/CSS Available
Web Component In Progress (MDS-6388)
Last Updated
2.0.0

Field errors indicate form elements with invalid or missing entries and provide a description of the error.

See Forms for guidance on composing full forms.

Variations

Inputs

<form class="mds-form mds-form--medium-layout" method="post" action="form/processor">
    <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-label="This field is required.">*</abbr>
        </label>
        <input class="mds-form__input" type="text" id="error-first-name" aria-describedby="first-name-error" aria-invalid="true">
        <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>
</form>

Text Areas

<form class="mds-form mds-form--medium-layout" method="post" action="form/processor">
    <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-label="This field is required.">*</abbr>
        </label>
        <textarea class="mds-form__textarea" id="error-textarea" aria-describedby="textarea-error" aria-invalid="true"></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>
</form>

Selects

Expense Type *

This field is required

<form class="mds-form mds-form--medium-layout" method="post" action="form/processor">
    <div class="mds-form__field-group mds-form--error">
        <label class="mds-form__label" for="error-select"> Expense Type <abbr class="mds-form__label-required-indicator" title="This field is required." aria-label="This field is required.">*</abbr>
        </label>
        <div class="mds-form__select">
            <select class="mds-form__select-input" id="error-select" aria-invalid="true">
                <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>
        <span class="mds-form__field-error" role="alert">
            <span class="mds-form__field-error-text"> This field is required </span>
        </span>
    </div>
</form>

Checkboxes

Select one or more statistics to view. * Average Minimum Maxiumum Medium You must select at least one statistic.

<form class="mds-form mds-form--medium-layout" method="post" action="form/processor">
    <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-label="Please select at least one option.">*</abbr>
            </legend>
            <label class="mds-form__checkbox" for="average--31538">
                <input id="average--31538" type="checkbox" class="mds-form__checkbox-input" aria-describedby="checkbox-error" aria-invalid="true" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Average </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="minimum--84857">
                <input id="minimum--84857" type="checkbox" class="mds-form__checkbox-input" aria-describedby="checkbox-error" aria-invalid="true" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Minimum </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="maxiumum--87408">
                <input id="maxiumum--87408" type="checkbox" class="mds-form__checkbox-input" aria-describedby="checkbox-error" aria-invalid="true" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#minus--s">
                            </use>
                        </svg>
                    </span>
                    <span class="mds-form__checkbox-text"> Maxiumum </span>
                </span>
            </label>
            <label class="mds-form__checkbox" for="medium--18998">
                <input id="medium--18998" type="checkbox" class="mds-form__checkbox-input" aria-describedby="checkbox-error" aria-invalid="true" />
                <span class="mds-form__checkbox-visible-wrap">
                    <span class="mds-form__checkbox-visual">
                        <svg class="mds-icon mds-form__checkbox-checked-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.svg#check--s">
                            </use>
                        </svg>
                        <svg class="mds-icon mds-form__checkbox-indeterminate-icon" aria-hidden="true">
                            <use xlink:href="/icons/mds.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>
</form>

Radio Buttons

<form class="mds-form mds-form--medium-layout" method="post" action="form/processor">
    <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-label="Please select an option.">*</abbr>
            </legend>
            <label class="mds-form__radio-button" for="your-list--74657">
                <input id="your-list--74657" name="group-name" value="blue" type="radio" class="mds-form__radio-button-input" aria-describedby="radio-button-error-message" aria-invalid="true" />
                <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--16990">
                <input id="peer-group--16990" name="group-name" value="blue" type="radio" class="mds-form__radio-button-input" aria-describedby="radio-button-error-message, invalid=true" />
                <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>
</form>

Sizing

Sizing affects text size. The default size is medium, and you can use a modifier class to make errors smaller (mds-form__field-error--small) or larger (mds-form__field-error--large).

Small

This is example error text.

Medium (Default)

This is example error text.

Large

This is example error text.

<span class="mds-form__field-error mds-form__field-error--small" role="alert">
    <span class="mds-form__field-error-text"> This is example error text. </span>
</span>

Guidelines

Use When

Indicating form elements with invalid or missing entries.
Providing guidance on how to resolve an invalid form entry.

Don’t Use When

Providing a user with password requirements or other criteria for filling out a form. Instead, use Microcopy

Visual Language

Match the size of field errors to the form element they’re paired with.

Behaviors

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.
See the Errors UX pattern for additional behavioral guidelines.

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’re directly responsible for the error, tell them.
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].”

Accessibility

Always include role="alert" on .mds-form__field-error components.
Include an aria-describedby attribute on each input, textarea, or select that has 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__field-error component. See the form grouping elements in the Forms composition section for more information.

Code Reference

Always wrap grouped form elements in a mds-form__field-group container.

<div class="mds-form__field-group mds-form--error">
    <fieldset class="mds-form__checkbox-group" role="group">
        <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-form__label-required-indicator-label">Required Field.</span>
        </label>
        <input class="mds-form__input" type="text" id="error-first-name" aria-describedby="first-name-error" aria-invalid="true">
    </fieldset>
</div>

CSS Class References

Class	Applies to	Outcome
`mds-form--error`	`mds-form__field-group`	Applies error styles to the form element within the field group.
`mds-form__field-error--small`	`mds-form__field-error`	Applies small styles to the descriptive error text.
`mds-form__field-error--large`	`mds-form__field-error`	Applies large styles to the descriptive error text.

Link Template

Variations

Inputs

Text Areas

Selects

Checkboxes

Radio Buttons

Sizing

Guidelines

Use When

Don’t Use When

Visual Language

Behaviors

Editorial

Related UI Components

Related UX Patterns

Accessibility

Code Reference

CSS Class References