Error Message

formUSWDS-derived

An inline error message for form validation.

Variants

Default

This field is required.

<span class="flex-error-message" role="alert"><span class="u-visually-hidden">Error: </span>This field is required.</span>

Long Message

Please enter a valid email address in the format name@example.com. The email you provided does not match the expected pattern.

<span class="flex-error-message" role="alert"><span class="u-visually-hidden">Error: </span>Please enter a valid email address in the format name@example.com. The email you provided does not match the expected pattern.</span>

Contract

Class mapping

USWDS	Flex	Notes
`usa-error-message`	`.flex-error-message`	Inline validation error message

Verified properties

font-familyfont-sizefont-weightcolor

Behavior promises

✓ Error message announced via role="alert" or aria-live

Source CSS

Base styles: Typography Base

/* flex-error-message — USWDS Error Message conformance
   Extends: Typography Base (base-classes.css#typography) */
.flex-error-message {
  color: var(--flex-color-error);
  font-weight: 700;
  display: block;
  padding-block: 0.25rem;
}