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

PropTypeDefaultRequired
size
"sm" | "md"
md

-

state
"error"

-

-

cssCSSProperties

-

-

namestring

-

asJSX.IntrinsicElements

-

-

type
"number" | "text" | "search" | "email" | "password" | "tel" | "url"
text

-