Required-Fields Key

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

Variations

Default

Use to describe the required-field indicator symbol.

Default

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

Link Template

Variations

Default

Sizing

Guidelines

Visual Language

Related UI Components

Related UX Patterns

Code Reference

CSS Class References