Validation

formUSWDS-derived

Validation message patterns for inline (per-field) and summary (top of form) error display.

Variants

Default

This field is required.

<div class="flex-validation" data-state="error"><span class="flex-validation__message">This field is required.</span></div>

Error Message

Enter a valid name.

<div class="flex-validation" id="name-error" data-state="error"><span class="flex-validation__message">Enter a valid name.</span></div>

Success

Your input looks good.

<div class="flex-validation" data-state="success"><span class="flex-validation__message">Your input looks good.</span></div>

Summary

Your form has errors

Enter your first name
Enter a valid email address

<div class="flex-validation-summary" role="alert">
  <h3 class="flex-validation-summary__heading">Your form has errors</h3>
  <ul class="flex-validation-summary__list">
    <li><a href="#first-name">Enter your first name</a></li>
    <li><a href="#email">Enter a valid email address</a></li>
  </ul>
</div>

Summary Custom Heading

Please fix the following errors

Enter a valid phone number

<div class="flex-validation-summary" role="alert">
  <h3 class="flex-validation-summary__heading">Please fix the following errors</h3>
  <ul class="flex-validation-summary__list">
    <li><a href="#phone">Enter a valid phone number</a></li>
  </ul>
</div>

Contract

Class mapping

USWDS	Flex	Notes
`usa-checklist`	`.flex-checklist`	Validation checklist pattern
`usa-checklist__item`	`.flex-checklist__item`	Checklist item
`usa-checklist__item--checked`	`data-state="checked"`	Checked state for checklist item

Verified properties

font-familyfont-sizeline-heightcolor

Intentional differences

text-indent: ours = -2.5rem, USWDS = -2.5rem

Checklist uses text-indent for hanging indent — visual rendering matches

Source CSS

/* flex-validation — USWDS Validation conformance
   Inline validation messages (error/success)
   Summary validation with error links
   Checklist pattern for validation requirements */

/* --- Inline validation message --- */

.flex-validation {
  font-size: var(--flex-text-uswds);
  line-height: 1.5;
  margin-block-start: var(--flex-space-xs);

  &[data-state="error"] .flex-validation__message {
    color: var(--flex-color-error);
    font-weight: 700;
  }

  &[data-state="success"] .flex-validation__message {
    color: var(--flex-color-success);
    font-weight: 700;
  }
}

/* --- Validation summary --- */

.flex-validation-summary {
  font-size: var(--flex-text-uswds);
  line-height: 1.5;
  border-inline-start: 0.25rem solid var(--flex-color-error);
  padding: 1rem 1.25rem;
  margin-block-end: 1.5rem;
}

.flex-validation-summary__heading {
  font-size: 1.34rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--flex-color-error);
}

.flex-validation-summary__list {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;

  li {
    margin-block-end: 0.25rem;
  }

  a {
    color: var(--flex-color-error);
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

/* --- Checklist pattern --- */

.flex-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--flex-text-uswds);
  line-height: 1.5;
}

.flex-checklist__item {
  text-indent: -2.5rem;
  margin-inline-start: 2.5rem;
  margin-block-start: 0.5rem;
  margin-block-end: 0;

  &::before {
    content: " ";
    display: inline-block;
    block-size: 1rem;
    margin-inline-start: -0.25rem;
    margin-inline-end: 0.75rem;
    inline-size: 2rem;
  }

  &[data-state="checked"]::before {
    content: "\2713";
    color: var(--flex-color-success);
    font-weight: 700;
  }
}