Morningstar Design System

Required-Fields Keys

Variations Design Guidelines Code Reference Accessibility

Required-Fields Keys

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

See Forms for guidance on composing full forms.

Variations Design Guidelines Code Reference Accessibility

Variations

Default

Use to describe the required-field indicator symbol.

Default
Required fields
Default
Required fields
HTML Web Component 
<span class="mds-form__required-fields-key">Required fields</span>
<mds-required-fields-key>Required fields</mds-required-fields-key>

Sizing

Sizing affects text size. The default size is medium, and you can use modifier classes or props to make the required fields key smaller or larger.

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

Visual Language

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

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.

Web Component

Props

Prop
Type
Validation
Default
Description

class

String

—

—

A space-separated list of class names that will be appended to the default mds-form__required-fields-key class.

id

String

—

—

The id attribute for the HTML element.

size

String

Enum: ["small", "medium", "large"]

medium

Alters the size of the required fields key.

text

String

Required

—

The text for the required fields key. Can also be passed via the default slot.

Slots

Default Slots

Any text or markup passed in between the <mds-required-fields-key></mds-required-fields-key> tags will be used as the required fields key’s text. This slot can accept plain text, or a combination of text and any tags where appropriate. If no content is passed in via the slot and the text prop is empty, the required fields key content will be empty.

Usage Examples

Setting the text and size:

<!-- Using Props -->
<mds-required-fields-key text="Required Fields" size="small"></mds-required-fields-key>
<!-- Using Slots -->
<mds-required-fields-key size="small"> Required Fields </mds-required-fields-key>

Implementation