FormField

Implemented

Label + control wrapper atom. Binds label htmlFor to the child control via cloneElement (injects id, aria-describedby, aria-invalid), renders required asterisk, hint paragraph, and role=alert error paragraph with AlertIcon fallback. Supports read-only display mode (label above rendered value, mono code option) and flex width slots for FormRow composition.

Categoryatoms

Sourcesrc/components/atoms/FormField/FormField.tsx

AI HintWrap every dashboard form control in FormField — it wires label/error/hint accessibility automatically. Use width slots inside FormRow, readOnly for view screens.

Catalog fallback

Live MDX preview not available for FormField. Showing component catalog metadata instead.

Props

Preview

FormField

Prop

Type

Required

Default

Description

label

string

Required

—

Field label rendered above the control

children

React.ReactNode

Required

—

The form control (cloned with id/aria wiring)

htmlFor

string

Optional

useId fallback

Explicit control id (otherwise generated)

error

string

Optional

—

Error message; renders role=alert paragraph + aria-invalid

errorIcon

React.ReactNode

Optional

AlertIcon error

Leading icon inside the error paragraph

hint

React.ReactNode

Optional

—

Helper text below the control (hidden when error set)

required

boolean

Optional

false

Show required asterisk (aria-hidden)

width

'default' | 'wide' | 'narrow'

Optional

'default'

Flex growth slot inside FormRow

readOnly

boolean

Optional

false

Render as read-only display value instead of input

mono

boolean

Optional

false

Render read-only value inside <code> (slugs, ids)

Quick use:<FormField />

Accessibility

ARIA rolealert (error paragraph)

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<FormField label="Name" required><Input /></FormField>

Example 2

tsxSnippet

<FormField label="Slug" readOnly mono>{slug}</FormField>