Microcopy

  • HTML/CSS Available
  • Web Component Deprecated
  • 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

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.