FormFieldError

Implemented

Standalone inline validation-error atom: renders the message in a role=alert paragraph with semantic-error color. Renders nothing when message is empty.

Categoryatoms

Sourcesrc/components/atoms/FormFieldError/FormFieldError.tsx

AI HintUse for inline validation errors outside FormField (which has its own built-in error slot).

Inline validation-error atom: renders the message in a role="alert" paragraph with semantic-error color. Renders nothing when message is empty.

FormFieldError

Atom - Form family

Standalone field-error paragraph for custom form layouts. The FormField atom already wires this for standard fields.

Enter a valid email address.

Password

Password must be at least 8 characters.

Props

Prop

Type

Default

Description

message*

string

—

Error text; empty string renders null.

id

string

—

DOM id, for aria-describedby wiring to the invalid control.

className

string

—

Additional CSS classes appended to the paragraph.

Props

Preview

FormFieldError

Prop

Type

Required

Default

Description

message

string

Required

—

Error text; empty string renders null

id

string

Optional

—

DOM id (for aria-describedby wiring)

className

string

Optional

—

Additional CSS classes

Quick use:<FormFieldError />

Accessibility

ARIA rolealert

Usage

Import

tsxSnippet

import { FormFieldError } from "@epasslive/design-system"

Example 1

tsxSnippet

<FormFieldError message="Email is required" />