Field: Input
A label, a control and a description. Clicking the label focuses the input, and screen readers read the description after the label.
Shown on your profile. You can change it once a month.
This adds the example as components/examples/field/input.tsx, together with the Field component and the HextaUI theme tokens it needs.
pnpm dlx shadcn@latest add https://hextaui.com/r/field-input.jsonTo add only the component, follow the Field installation.
- Validation
- Custom validation
- Required and optional
- Status
- Character count
- Errors from a form library or server
- Checkboxes
- Choice cards
- Fieldset
- Responsive
- Disabled
- Long content
- Right to left
See them all, with keyboard support and accessibility notes, on the Field page.
- InputA text input with three sizes, invalid and read-only states, native validation styling and a 16px touch font so phones never zoom in.
- MotionThe easing curves, durations and reduced-motion check every component animates with, plus hooks for size morphs and sliding highlights.
- SeparatorA hairline that divides content horizontally or vertically, with an optional label and a decorative mode for purely visual lines.
- useComposedRefKeeps a ref to your own element while still forwarding it to whatever ref the parent passed in.
- useMergedRefCombines any number of callback and object refs into one, with React 19 ref cleanup for each of them.
- CalendarA date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.