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

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.