Input
inputCollects single-line text with prefixes, suffixes, and an invalid state.
Usage
Basic usage
A minimal input; use placeholder for empty-state guidance.
<Input placeholder="Please enter..." className="w-64" />Prefix and suffix
prefix / suffix slots embed units, currency symbols, etc.
<Input prefix="¥" suffix=".00" placeholder="0" className="w-64" />Size
size provides three levels of sm / md (default) / lg.
<>
<Input size="sm" placeholder="sm" className="w-64" />
<Input size="md" placeholder="md" className="w-64" />
<Input size="lg" placeholder="lg" className="w-64" />
</>Inline cell editing
variant="cell" strips the shell (no border, transparent background, zero padding, no fixed row height) and swaps the focus ring for a tinted background plus an inset underline, because a ring spills over into the neighbouring cell. The call site needs no className at all.
| customer_name | |
| contact_phone | |
| service_city |
const columns: ColumnDef<SeedRow, any>[] = [
{ accessorKey: "field", header: "Field name", size: 160 },
{
accessorKey: "value",
header: "Value",
cell: ({ row }) => (
<Input variant="cell" defaultValue={row.original.value} aria-label={row.original.field} placeholder="Empty" />
),
},
];
<Table columns={columns} data={rows} density="compact" />Invalid state
invalid marked with red border and focus ring (manual transmission when used independently).
<Input invalid defaultValue="Wrong value" className="w-64" />Disabled
disabled Reduce transparency and block interaction.
<Input disabled defaultValue="Disabled" className="w-64" />When to use
Use Input for single-line text. Use Textarea for multiple lines, Select for fixed options, or Switch, Checkbox, and Radio for on/off, multi-select, and single-select choices. Inside HulianUI Field, label, error, and ARIA relationships are applied automatically.
Import
import { Input, inputShellVariants } from "@hulianui/ui"Props
Inherit the native <input> properties (except size/prefix are overridden below, such as value/onChange/type/placeholder/disabled…).
| Name | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | Size (CVA variant, overrides native size). xs is a 28px-tall, 12px-text density step for inline editors in dense legacy tables; it keeps its border, unlike the borderless variant="cell". Under variant="cell" it only affects font size; height and padding are gone |
| variant | "default" | "cell" | "default" | Shell form. cell is the in-place editor for a table cell: no border, transparent background, zero padding, no fixed row height, and focus is shown as a tinted background plus an inset underline instead of a focus ring |
| value | string | number | readonly string[] | null | - | Controlled value. Beyond the native types it also accepts `null` and renders it as an empty string (#220): register().value from `useForm` passes an explicitly cleared null straight through, and a native <input value={null}> would be treated as uncontrolled by React with a warning, so this component folds it here. Omitting it (undefined) still means uncontrolled |
| invalid | boolean | false | Marked red when used independently; automatically driven by Field.Root invalid in hulian Field, no need to repeat the transmission |
| disabled | boolean | false | Disable |
| ref | Ref<HTMLInputElement> | - | Forward to the inner native <input> (not the shell span). focus() / select() / register() from .value / react-hook-form all rely on it |
Events
| Event | Type | Description |
|---|---|---|
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | supports native input callback (used with value when controlled) |
Slots
| Slot | Type | Description |
|---|---|---|
| prefix | ReactNode | Prefix content (such as ¥) |
| suffix | ReactNode | Suffix content (such as .00) |
Usage guidelines
- Do not pass
invalidagain inside HulianUI Field.Field.Rootsupplies invalid styling automatically, and a manual value can conflict. Passinvalidonly when Input is used independently. - Use
variant="cell"for in-place editing in a table instead of writingclassName="border-0 bg-transparent p-0 focus-visible:ring-0 …"at the call site. Beyond being the call-site patching the conventions forbid, two of its effects are hard to spot:ring-0does not clearring-offset(a ring of background colour survives), and the default shell's fixed row height (h-10) is not padding, sop-0cannot remove it and dense rows stay tall. - The focus indicator under
variant="cell"is a tinted background plus an inset underline, not a focus ring: a cell has no padding, so a 2px ring with a 2px offset spills over into the neighbouring cell. If your scenario needs a stronger cue, change the whole cell background on the<td>rather than bringing the ring back.
Related
Textarea · Select · Checkbox · CheckboxGroup · Radio · Switch
Playground
<Input size="md" placeholder="Please enter..." />