Required-Fields Key

Required-fields keys describe the required-field indicator symbol.

Variations

Default

Use to describe the required-field indicator symbol.

Default
Required fields
<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">
    </div>
</form>

Sizing

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

Small
Required fields
Medium (Default)
Required fields
Large
Required fields
<span class="mds-form__required-fields-key mds-form__required-fields-key--small">Required fields</span>

Guidelines

Visual Language

  • Match the size of a required fields key to the form elements it’s paired with.

Code Reference

CSS Class References

Class
Applies to
Outcome

mds-form__required-fields-key--small

mds-form__required-fields-key

Applies small styles to the required fields key text.

mds-form__required-fields-key--large

mds-form__required-fields-key

Applies large styles to the required fields key text.

©2018 Morningstar, Inc. All rights reserved. Terms of Use