Morningstar Design System

Field Errors
updated

  • HTML/CSS Available
  • Web Component Beta
  • Last Updated

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

Inputs
This is placeholder error messaging. 
<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

Text Areas
This is placeholder error messaging. 
<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

Selects
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

Checkboxes
Select one or more statistics to view. * 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--11657">
                <input id="average--11657" 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--80568">
                <input id="minimum--80568" 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--77803">
                <input id="maxiumum--77803" 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--74265">
                <input id="medium--74265" 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

Radio Buttons
Select what you would like to rank within. * You must choose an option. 
<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--21986">
                <input id="your-list--21986" 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--13360">
                <input id="peer-group--13360" 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.
©2019 Morningstar, Inc. All rights reserved. Terms of Use