fetaUI
GitHub

Field

Label, control and help text as one unit, so they read, validate and announce together.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/field
Playground
We will send a receipt.
States
As shown on your card.
Valid
Enter a valid email.
Locked
Ask an owner to change this.
Horizontal
Shown on your profile.
With Textarea
Optional
0/160
Icons animation
Error
Disabled
Horizontal
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/field

Horizontal

The label moves into a 200 px column on Web, and stacks on Mobile.

Shown on your profile.
Error
Disabled
Motion

Accessibility

  • The label targets the control, and aria-describedby links the help or error.
  • aria-invalid is set when there is an error.
  • The error is announced as it appears.

Motion

  • The error slides in from 4 px above in 180 ms. Nothing shakes.
  • The check scales in once the value is valid.
  • With reduced motion, messages appear in place.

Responsive behavior

  • Horizontal fields stack on Mobile.

Performance

  • The error and the check mount only when present, through AnimatePresence.
  • Focus is tracked by bubbling focus and blur on one Field, so typing elsewhere does not re-render it.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Field from @/components/fetaui/field. Give it one control as children: Input, Textarea, Select, Combobox or anything using the form kit.
  • It provides id, aria-describedby, invalid, disabled and required to the control through context, and renders Label for you.
  • Passing error makes the field invalid and replaces description. valid only shows a check, so set it after you have really checked the value.
  • Validation is yours. The demo errors are fixed text.
/docs/components/field/markdown
PreviousTextarea
NextFieldset

Related

LabelComponentThe name of a control, tied to it so a click on the label focuses the field.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.FieldsetComponentFields grouped under a legend, in an inset card on the tray.SelectComponentChoose one value from a list. The list grows out of the trigger and the highlight glides.TextareaComponentMulti line text with a mono character count.