Forms

Field

A form field frame that wires labels, help text, and errors.

StableNew shared patternRegistry JSON

Workspace name

Visible to everyone on your team.

Data region

Choose where new records are stored.

Custom domain

This domain is already connected to another workspace.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add field

Writes components/ui/field.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { Field } from "@/components/ui/field";

Props and composition points for Field. Native element props pass through.

Prop	Type	Default	Description
`htmlFor`	`string`	None	The id of the control this field labels. Required.
`label`	`ReactNode`	None	Visible label text. Required.
`description`	`ReactNode`	None	Rendered under the control with an id of `{htmlFor}-description`.
`error`	`ReactNode`	None	Rendered under the control with role alert and an id of `{htmlFor}-error`.
`required`	`boolean`	None	Adds a decorative asterisk. Also set required on the control.

Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Field renders the label and associates it with htmlFor. It does not inject props into the control.
When a description or error is present, set aria-describedby on the control to the generated id.
Set aria-invalid on the control when error is present; the Input and Select components style it.
Use a visible label. A placeholder is an example, not a label.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.