docs / core / input
Input
a single line of text you type into. anything longer is a textarea, not a taller Input.
intensity · recedesrsc · client
provenance
authored in usvalayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
under a Label, inside form rows and field groupsaria-invalid flags the field the error text points atnever unlabeled. a placeholder is not a labelno search icons or buttons stuffed inside. wrap it insteada11y
a native<input>, named by a Label or aria-label · aria-invalid paints the danger statejest-axelive demo · try it out
customize
typenative input type
placeholderhint text, never a label
valuethe starting text
invalidsets aria-invalid, paints danger
disableddims to 50%, not-allowed cursor
usage
import { Input } from "@usva-ui/react/primitives/input";
<Input type="email" placeholder="you@example.com" />props
| prop | type | default | notes |
|---|---|---|---|
| aria-invalid | boolean | false | danger border and ring for the field the error text points at. |
| disabled | boolean | false | dims to 50% with a not-allowed cursor. |
| …InputHTMLAttributes | React.InputHTMLAttributes | — | every native input attribute passes straight through. |
get it
bun add @usva-ui/reactusage
import { Input } from "@usva-ui/react/primitives/input";
<Input placeholder="you@example.com" type="email" />
<Input aria-invalid defaultValue="not-an-email" />
<Input disabled placeholder="Disabled" />