Required-Fields Keys

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

See Forms for guidance on composing full forms.

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

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

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