Input is the lowest-level input component for text and number types
Inputs should be accompanied by labels, so rather than using Input
directly in a UI,
it’s normally best to use a field component, which combines an Input
with a Label
and
displays validation errors. If none of the existing field components suit your needs,
it might be worth adding a new one.
Input
accepts a subset of the types
that an HTML input
element because we have more specialised
components for the others (e.g. Checkbox
, Radio
).
Edit me!
Accessibility
While Input
accepts "number"
for its type
prop, this does not render <input type="number"/>
. Instead,
it renders <input type="text" inputmode="numeric" pattern=[0-9]*/>
to tell browsers to show a numeric keyboard
while avoiding the UX and accessibility problems associated with type="number"
.
API Reference
Prop | Type | Default | Required |
---|---|---|---|
size | "sm" | "md" | md | - |
state | "error" | - | - |
css | CSSProperties | - | - |
name | string | - | |
as | JSX.IntrinsicElements | - | - |
type | "number" | "text" | "search" | "email" | "password" | "tel" | "url" | text | - |