ComponentReactregistry:ui

Field

field

Form field composition: Field, FieldControl, FieldLabel, FieldDescription, FieldError. Auto-wires accessibility: FieldControl (a Slot around any control) receives a generated id, aria-describedby pointing at the description and error, and aria-invalid; the label targets the control automatically. invalid/disabled props drive data attributes, label color and dimming. orientation switches vertical (default) and horizontal (label-left, e.g. switch rows).

@ai2 Registry JSON

This item declares no source files.

Notes from the author

Wrap the control in FieldControl to get id/aria-describedby/aria-invalid wiring for free. FieldError renders nothing when empty, so you can bind it directly to a form library's error string; a present error marks the whole field invalid.

Install

npx shadcn@latest add @ai2/field

Needs @ai2 in your components.json registries — switch to URL if it doesn't resolve.

Registry: @ai2
Kind: Component
Framework: React
Files: 0 · 4.1 KB
Preview: Unavailable

Registry dependencies

label@ai2
tokens@ai2
primitives@ai2

This item belongs to @ai2. Registry Index indexes and previews it; check the registry's license before use.

1 example

See it in use

Used by 1 item

Built on Field

Other @ai2 items that list this one as a dependency.

@ai2

More from @ai2