Field

Last updated: October 14, 2026

Accessible field compound with label, description, control, and error — powered by Base UI Field.

Installation

npx smoothui-cli add field

Base UI Field compound for labeling and validating form controls. Vertical stack with label, description, styled control, and error messaging.

Compose Field, FieldLabel, FieldControl, FieldDescription, and FieldError. The root wires ids and aria-* associations automatically.

Attribute	Element	Purpose
`for` / `id`	Label ↔ Control	Associates the label with the control
`aria-describedby`	Control	Links description and error messages
`aria-invalid`	Control	Marks the control when the field is invalid

base-ui

SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.