field

Accessible field wrapper that wires label, description and error to a control.

@fluixi/field wraps a form control in the accessible pattern required by WAI-ARIA: a <label>, an optional description, and an optional error message, all linked to the control via generated IDs. Any child component that calls useFieldContext() (inputs, selects, checkboxes…) picks up these IDs automatically.

Installation

pnpm add @fluixi/field

Usage

import { Field, FieldLabel, FieldDescription, FieldError } from '@fluixi/field';
import { Input } from '@fluixi/input';

<Field invalid={!!errors.email}>
  <FieldLabel>Email</FieldLabel>
  <Input type="email" />
  <FieldDescription>We'll never share your email.</FieldDescription>
  <FieldError>{errors.email?.message}</FieldError>
</Field>

Parts

Part	Description
`Field`	Root. `invalid`, `required`, `disabled` propagate to the control via context.
`FieldLabel`	Renders a `<label>` linked to the control via `for`.
`FieldDescription`	Help text; linked via `aria-describedby`.
`FieldError`	Error message; linked via `aria-errormessage`, shown only when `invalid`.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.