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" />Dimensions
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" />
</>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 | "sm" | "md" | "lg" | "md" | Size (CVA variant, overrides native size) |
| 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 invalid again inside HulianUI Field. Field.Root supplies invalid styling automatically, and a manual value can conflict. Pass invalid only when Input is used independently.
Related
Textarea · Select · Checkbox · CheckboxGroup · Radio · Switch
Playground
<Input size="md" placeholder="Please enter..." />