Inputs collect text and structured values in forms, one shared anatomy of label, box, and hint spanning the single-line Input, its date, number, payment, tags, PIN, and file relatives, and the multiline TextArea.
Inputs collect text and structured values in forms, one shared anatomy of label, box, and hint spanning the single-line Input, its date, number, payment, tags, PIN, and file relatives, and the multiline TextArea.
Pick the component, then change the props and copy the result. The Input field’s type select carries the sheet’s full Type axis, mapping each name to its kit recipe: the composed types preview InputGroup with its addons, and the copied snippet carries the whole recipe, imports included. Controls that do not exist on the selected type leave the rail.
The field fills its container
Input is w-full: the demo bounds it at 320px for presentation, but the copied snippet carries no wrapper, so in your layout the field stretches to whatever holds it. Width is your container’s job, not a prop.One shared anatomy, label above box above hint, from four source directories: the core field and its composition parts, the structured relatives, and the form plumbing.
| Component | Description | Import from |
|---|---|---|
| Input | The standard text field: label, placeholder, hint, icon, and shortcut in one prop-driven component. | @/components/base/input/input |
| TextField | React Aria TextField wrapper that provides size and styling context to InputBase children. | @/components/base/input/input |
| InputBase | The bare input box: use inside TextField, InputGroup, or other field compositions. | @/components/base/input/input |
| Label | Field label with required indicator and optional tooltip. | @/components/base/input/label |
| HintText | Helper or error text below a field, wired to it as description or error message. | @/components/base/input/hint-text |
| InputGroup | Composes an input with prefix text and leading or trailing addons. | @/components/base/input/input-group |
| InputFile | Ready-made upload field: a read-only box and a button that both open the system file picker. | @/components/base/input/input-file |
| InputDate | Date field made of focusable calendar-aware segments. | @/components/base/input/input-date |
| InputNumber | Numeric field with stepper buttons, vertical or horizontal. | @/components/base/input/input-number |
| PaymentInput | Card-number field that formats digits and detects the card brand from its prefix. | @/components/base/input/input-payment |
| InputTags | Multi-value tag input; Enter commits the typed value. | @/components/base/input/input-tags |
| InputTagsOuter | InputTags variant rendering its tags below the box; the hint yields to the tag list. | @/components/base/input/input-tags-outer |
| PinInput | Compound one-time-code input: Root, Label, Group, Slot, Separator, Description. | @/components/base/input/pin-input |
| TextArea | Multiline text field with label and hint, in 2 sizes. | @/components/base/textarea/textarea |
| Form | React Aria Form wrapper: Enter submits, native validation surfaces. | @/components/base/form/form |
| FileTrigger | Opens the system file picker from any pressable child. | @/components/base/file-upload-trigger/file-upload-trigger |
This family is form-library agnostic
hook-form.tsx, an upstream bridge to react-hook-form (HookForm and FormField) that nothing in the template consumed. The file and the dependency were both removed, the dependency because the pieces a real setup needs beside it — a schema library and a resolver — were never installed either, so it prepared nothing.Pick a form approach when you build one
value, onChange, label, hint, isInvalid. That suits a server action posting a native form, react-hook-form with a schema, or both together, and nothing in the kit assumes one. Install the whole set at once when you choose, so the next reader finds a deliberate setup rather than an orphaned dependency.The 3 sizes. Box heights measure 36, 40, and 44px in the browser, matching the Figma sheet’s geometry exactly. The hint drops from text-sm to text-xs at sm; md and lg share their text scale and differ by padding.
| sm | md | lg |
|---|---|---|
Hover and focus states are live. Interact with any cell.
The code default is md, on five of the members
sm is the default while the code destructures size = "md" in input.tsx, input-date.tsx, input-tags.tsx, input-tags-outer.tsx, and input-number.tsx. This page documents the code. The rest of the family is not affected: InputFile genuinely defaults to sm and its JSDoc agrees, and TextArea makes no @default claim at all.What one Input can carry, all real props at md: a leading icon, a keyboard-shortcut badge, a help tooltip, a password visibility toggle, and the required indicator. The search form has no label, so the kit names it from the placeholder; treat that as the exception, not the pattern.
The Figma sheet’s Examples frame, rebuilt cell for cell with kit parts. Each caption names the sheet’s variant, then the recipe that produces it: the dropdown and button addons come from NativeSelect and Button composed through InputGroup, rather than being input types of their own.
$
The success hint is composed, not built in
HintText knows two slots, description and error message. The sheet’s green check state has no kit prop, so the password cell above passes a composed node to hint, which is the honest way to reproduce it until the kit adds one.The rest of the family, all live. Each one keeps the label, hint, sizes, and state treatments of the core field and specializes the box: segments for dates, steppers for numbers, brand detection for cards, removable tags, code slots, a multiline surface, and a picker trigger.
Every treatment below is a real prop on a live field: isRequired, isDisabled, and isInvalid are the states the kit exposes. With a hint present, an invalid field renders that hint as its error message, recolored and wired to the input.
Focus cannot be forced from outside