Required-Fields Keys
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.
<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.
<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.
Related UI Components
Related UX Patterns
CSS
Class References
|
Class
|
Applies to
|
Outcome
|
|---|---|---|
|
|
|
Applies small styles to the required fields key text. |
|
|
|
Applies large styles to the required fields key text. |
Web Component
Props
|
Prop
|
Type
|
Validation
|
Default
|
Description
|
|---|---|---|---|---|
|
|
String |
— |
— |
A space-separated list of class names that will be appended to the default |
|
|
String |
— |
— |
The |
|
|
String |
One of: |
|
Alters the size of the required fields key. |
|
|
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:
<!-- 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
- Always include a Required Label with each required form element. See the Forms composition section for examples.