Microcopy

Variations Design Guidelines Code Reference Accessibility

Microcopy

HTML/CSS Available
Web Component Available
Last Updated
2.23.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.

<!-- HTML -->
<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>
<!-- Web Component -->
<mds-field-group>
    <mds-label for="password">Password</mds-label>
    <mds-microcopy id="password-help-text">Your password must contain a letter and a number.</mds-microcopy>
    <mds-input id="password" type="password" aria-describedby="password-help-text"></mds-input>
</mds-field-group>

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.

Touch

This is example microcopy text.

Small

This is example microcopy text.

Medium (Default)

This is example microcopy text.

Large

This is example microcopy text.

Touch

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>

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 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.
`mds-form__microcopy--touch`	`mds-form__microcopy`	Adjusts styling to render touch microcopy.

Mixins

Touch Properties

Use this mixin to create media queries in your product styles to switch microcopy to the touch variation.

@include mds-microcopy-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.

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__microcopy` class.
`id`	String	Required	—	The `id` attribute for the HTML element.
`size`	String	One of: `small`, `medium`, `large`, `touch`	`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

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

Usage Examples

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

<mds-microcopy id="microcopy-id" 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.