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 field
Default
Required field
HTML Web Component 
<span class="mds-form__required-fields-key">Required field</span>
<mds-required-fields-key>Required field</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 field
Medium (Default)
Required field
Large
Required field
Touch
Required field
Small
Required field
Medium (Default)
Required field
Large
Required field
Touch
Required field
HTML Web Component 
<span class="mds-form__required-fields-key mds-form__required-fields-key--small">Required field</span>
<mds-required-fields-key size="small">Required field</mds-required-fields-key>
  • The large and touch sizes use the same styling.
  • See mixin documentation for additional details on how to create media queries to switch to the touch size.

Visual Language

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

Editorial

  • Use singular form with the asterisk: “Required field”
  • For capitalization, match the style you’re using in your form fields
    • If you’re using title case, use “Required Field”
    • If you’re using sentence case, use “Required field”
  • If all fields are required, note this at the beginning of the form; don’t asterisk each field.
    • ex: All fields are required
  • For a sign-in form, you don’t need to list “All fields required” or asterisks; sign-in forms, by default, suggest that all fields are required.

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.

mds-form__required-fields-key--touch

mds-form__required-fields-key

Applies touch styles to the required fields key text.

Mixins

Touch Properties

Use this mixin to create media queries in your product styles to switch required fields keys to their touch variation.

@include mds-required-field-key-touch-properties();
  • The mixin includes all CSS properties required to convert any size into the touch variation.
  • Uses the same styling as the large size.
  • When composing complex forms, consider using the @include mds-form-all-touch-properties(); mixin for efficiency.

Web Component

Props

When setting props as attributes on a custom HTML element, use kebab-case instead of camelCase.

Prop
Type
Validation
Default
Description

additionalClass

String

—

—

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

size

String

One of: small, medium, large, touch

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

Pass text in between the <mds-required-fields-key></mds-required-fields-key> tags to set the required fields key’s text. This can be overridden with the text prop.

Usage Examples

Setting size via props. Using the default slot for text content:

<mds-required-fields-key size="small">
    Required Fields
</mds-required-fields-key>

Implementation