Microcopy

  • HTML/CSS Available
  • Web Component Beta
  • Last Updated

    2.18.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.
<!-- 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.
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

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

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.