Field

Customize

Control

InputTextarea

State

DefaultInvalidDisabled

Description

OnOff

<Field
  label="Email"
  description="Never shared"
>
  <Input type="email" />
</Field>

npx shadcn@latest add https://components.haedong.dev/r/field.json

Extends the native label props. Takes exactly one control as children (Input, Textarea, …) and sets aria-invalid / aria-describedby on it.

Prop	Type	Description
label	string	Label text, muted uppercase.
description	string	Muted helper line under the control.
error	string \| false \| null	When truthy: the control gets aria-invalid, and the message replaces the description at full strength with a "!" prefix.
children	ReactElement	The control. Its own aria-invalid / aria-describedby are preserved.
className	string	Extra classes for the label element (e.g. width).