Field message

Field message options
Choice	Values	Default	What it does
`typesmbk-field-message--type-<value>`	`helpwarningerror`	`help`	Help is quiet text with no icon. Warning leads with the warning icon; error leads with the circled cross and turns the danger color.

Partssmbk-field-message__iconsmbk-field-message__text

Help under a control: what to enter, in quiet text.

Use 8 or more characters, with a number.

Help, a warning to notice and an error. The warning and the error lead with an icon, so neither is told by color alone.

We send the receipt here.

Caps Lock is on.

Add the part after the @, such as example.com.

The field draws its own line as a field message, linked to the control.

Email address

Add the part after the @, such as example.com.

Purpose

The line under a control or a group of choices. It says what to enter, flags something to notice, or says what is wrong and how to put it right. Every form part draws its line with it, so help, warnings and errors look and read the same everywhere.

When to use

Help under a control: what to enter, or why it is asked.
A warning the reader should notice while filling it in, such as Caps Lock being on in a password.
An error under a control or a group of choices, saying what is wrong and how to fix it.

When not to use

A single control's help or error inside a field. The field draws its line with this component and links it for you.
A message about the whole form or page. Use the alert.
A message that comes and goes on its own. Use the toast.

Usage rules

Do

Write an error as what to do: "Choose a delivery speed", not "Required".
Keep help to one short line.

Don't

Show an error before the reader has had a chance to answer.
Use a warning for an error: a warning does not stop the form.

Choose a date after today.

Say what is wrong and how to put it right, so the reader can fix it without guessing.

Invalid date.

Don't

A bare “Invalid date” says something failed but not what to change.

Anatomy

The block, one line of the small body text that wraps when it must.
The icon part, before the words: the warning sign for a warning, the circled cross for an error. Help has none.
The text part, the words.

Behavior

Three types. Help is quiet text with no icon. A warning leads with the warning icon in the warning color, its words in the secondary text color. An error leads with the circled cross and turns its words the danger color. Nothing moves.

It is a paragraph, for a line of words. With as="div" it is a div, its words in a div too, for words written as blocks, such as paragraphs or a list, which a paragraph cannot hold; the component that places it spaces the blocks, as the field group does.

What it does for you

An error is an alert, so a screen reader reads it as it appears; a warning that appears while the reader types is better as a status, which waits for a pause. Pass the role to change it.
A status is read out only when words arrive in a place already on the page. Draw the message with no words (null) while there is nothing to say: it keeps an empty place, with no icon, and the words fill it when they come.
A warning and an error are words with an icon, never color alone. The icon is decorative; the words say it all.

What you must do

Give the message an id and point the control's or the group's aria-describedby at it, so it is read with the control's name.
Pass null as the words while there is nothing to say, so the place is on the page before the words arrive.
Choose the role: leave an error as an alert, and pass the status role for a warning that appears while the reader types.

How to test

With a screen reader, focus the control: the message is read after its name.
Cause an error: it is read as it appears. Cause a warning while typing: it is read after a pause.
With the colors removed, the icon and the words still say it is a warning or an error.
With text at 200% and the page 320 pixels wide, the words wrap and stay whole.
In a forced-color mode, the icon is still visible.

The files the field message is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

field-message.css

/* smbk-field-message — Field message. Figma "Field message" 7101:46 (Type: Help, Warning, Error).
 * The line under a field or a group of choices: help that says what to enter,
 * a warning to notice (a password field's Caps Lock notice), or an error that
 * says what is wrong. Body SM. The warning and the error lead with an icon at
 * the small icon size, so neither is told by color alone; help has none. */

.smbk-field-message {
  display: flex;
  align-items: flex-start;
  gap: var(--smbk-space-inline-xs);
  margin: 0;
  color: var(--smbk-color-text-subtlest);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

/* The icon's box is as tall as the text's line, so the icon sits on the first line's middle. */
.smbk-field-message__icon {
  height: calc(var(--smbk-typography-body-sm-font-size) * var(--smbk-typography-body-sm-line-height));
  font-size: var(--smbk-size-icon-sm);
}

.smbk-field-message__text {
  min-width: 0;
}

.smbk-field-message--type-warning {
  color: var(--smbk-color-text-subtle);
}

.smbk-field-message--type-warning .smbk-field-message__icon {
  color: var(--smbk-color-feedback-warning-icon);
}

.smbk-field-message--type-error {
  color: var(--smbk-color-feedback-danger-text-on-subtle);
}

.smbk-field-message--type-error .smbk-field-message__icon {
  color: var(--smbk-color-feedback-danger-icon);
}

Tokens it reads

Field message tokens
Token and CSS	Value	Preview	Foundation
space.inline.xs--smbk-space-inline-xs	4px		Spacing
color.text.subtlest--smbk-color-text-subtlest	light: #606a75dark: #7c8692changes with theme		Color
typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
size.icon.sm--smbk-size-icon-sm	16px		Size
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
color.feedback.warning.icon--smbk-color-feedback-warning-icon	light: #b14904dark: #fa8349changes with theme		Color
color.feedback.danger.text-on-subtle--smbk-color-feedback-danger-text-on-subtle	light: #a51d17dark: #febdb2changes with theme		Color
color.feedback.danger.icon--smbk-color-feedback-danger-icon	light: #cc0d0ddark: #fe7d6dchanges with theme		Color

Manifest

field-message.manifest.json

{
  "name": "field-message",
  "block": "smbk-field-message",
  "summary": "The line under a field or a group of choices: help that says what to enter, a warning to notice, or an error that says what is wrong.",
  "adapt": "css",
  "axes": {
    "type": {
      "values": [
        "help",
        "warning",
        "error"
      ],
      "default": "help",
      "description": "Help is quiet text with no icon. Warning leads with the warning icon; error leads with the circled cross and turns the danger color."
    }
  },
  "flags": {},
  "parts": [
    "icon",
    "text"
  ],
  "figmaNodeId": "7101:46"
}

Menu

Customize the preview

Options

Examples

Usage

Types

Under a field

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Source

Options

Examples

Usage

Types

Under a field

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Related

Source