Passer au contenu principal
FormFieldError
ImplementedStandalone inline validation-error atom: renders the message in a role=alert paragraph with semantic-error color. Renders nothing when message is empty.
Categoryatoms
Source
src/components/atoms/FormFieldError/FormFieldError.tsxAI 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.
Email
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.
idstring—
DOM id, for aria-describedby wiring to the invalid control.
classNamestring—
Additional CSS classes appended to the paragraph.
Props
Preview
FormFieldError
Prop
Type
Required
Default
Description
messagestringRequired
—Error text; empty string renders null
idstringOptional
—DOM id (for aria-describedby wiring)
classNamestringOptional
—Additional CSS classes
Quick use:
<FormFieldError />Accessibility
ARIA rolealert
ARIA
1 ruleUsage
Import
tsxSnippet
import { FormFieldError } from "@epasslive/design-system"Example 1
tsxSnippet
<FormFieldError message="Email is required" />