Microcopy

Variations Design Guidelines Code Reference Accessibility

Microcopy

HTML/CSS Available
Web Component Beta
Last Updated
2.13.0

Microcopy augments a label to describe a form element in greater detail.

See Forms for guidance on composing full forms.

Variations Design Guidelines Code Reference Accessibility

Variations

Default

Use to describe a form element in greater detail.

Default

Your password must contain a letter and a number.

Default

Your password must contain a letter and a number.

HTML

Web Component

<span class="mds-form__microcopy" id="password-help-text"> Your password must contain a letter and a number. </span>

<mds-microcopy id="password-help-text">Your password must contain a letter and a number.</mds-microcopy>

Always wrap grouped form elements in a mds-form__field-group container.

<div class="mds-form__field-group">
    <label class="mds-form__label" for="password">Password</label>
    <span class="mds-form__microcopy" id="password-help-text"> Your password must contain a letter and a number. </span>
    <input class="mds-form__input" aria-describedby="password-help-text" type="password" id="password" />
</div>

Sizing

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

Small

This is example microcopy text.

Medium (Default)

This is example microcopy text.

Large

This is example microcopy text.

Small

This is example microcopy text.

Medium (Default)

This is example microcopy text.

Large

This is example microcopy text.

HTML

Web Component

<span class="mds-form__microcopy mds-form__microcopy--small" id="small-microcopy"> This is example microcopy text. </span>

<mds-microcopy size="small" id="small-microcopy">This is example microcopy text.</mds-microcopy>

Visual Language

Match the size of microcopy to the form element it’s paired with.

Editorial

Use full sentences with punctuation.
Aim for no more than two sentences.

CSS

Class References

Class	Applies to	Outcome
`mds-form__microcopy--small`	`mds-form__microcopy`	Adjusts styling to render small microcopy.
`mds-form__microcopy--large`	`mds-form__microcopy`	Adjusts styling to render large microcopy.

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__microcopy` class.
`id`	String	Required	—	The `id` attribute for the HTML element.
`size`	String	Enum: `["small", "medium", "large"]`	`medium`	Alters the size of the microcopy.
`text`	String	Required	—	The text for the microcopy. Can also be passed via the default slot.

Slots

Default Slots

Any text or markup passed in between the <mds-microcopy></mds-microcopy> tags will be used as the microcopy’s text content. 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 microcopy text content will be empty.

Usage Examples

Setting the text and size:

<!-- Using Props -->
<mds-microcopy text="Your password must contain a letter and a number." size="small"></mds-microcopy>
<!-- Using Slots -->
<mds-microcopy size="small"> Your password must contain a letter and a number. </mds-microcopy>

Implementation

Include an aria-describedby attribute on each input, textarea, or select that has an .mds-form__microcopy component providing additional information. The value of the aria-describedby attribute must match the id attribute on the .mds-form__microcopy component.