Field

Ready

Label, control, description, and error as one unit.

We'll only use this for receipts.

Installation

$ npx @oratiq-js/ui add field

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { useFieldControl, Field, FieldLabel, FieldSet } from "@/components/ui/field";

Anatomy

Field generates the ids and wires aria-describedby and aria-invalid, so controls don't each reimplement it.

We'll only use this for receipts.

Error state

Enter a valid email address.

The error message replaces the description rather than stacking below it. Two messages competing for the same slot is how users end up reading neither.

Horizontal orientation

For switches and checkboxes, where the label follows the control.

Push notifications

Get notified when a workout is due.

Field sets

Shipping address

First name

Last name

Address

Street, apartment, suite.

Accessibility

Label is bound to the control via htmlFor / id — clicking the label focuses the input.
Description and error are linked with aria-describedby, so both are announced on focus.
The error state sets aria-invalid, which the Input styles react to via the aria-invalid: variant.
Required is conveyed by the input's required attribute; the asterisk is aria-hidden decoration.

Props

Prop	Type	Default	Description
`error`	`ReactNode`	—	Presence switches the field into its error state.
`description`	`ReactNode`	—	Helper text, hidden while an error is showing.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Label above or beside the control.
`disabled`	`boolean`	`false`	Dims the field and its label.

View source on GitHub → components/ui/field.tsx