TextInput
A text input to be used in form context.The <TextInput /> component is most commonly used in a form context, where you would nest it inside a Field to get a label, validation message and spacing out of the box.
The text input will by default render as <input type="text" />, but also supports these types: password, email, number, tel, and url. When suitable, these are important to use for various browsers' auto-fill functionality e.g.
The input supports two sizes, small and medium (default). Prefer using size consistently with other form controls (a button e.g.) that support the same sizes.
Use adornmentStart or adornmentEnd prop when you need a prefix/suffix to the input, in text string format.
Use the placeholder prop to provide a hint or example of what the user can enter.
Avoid using placeholder text as a replacement for labels or descriptions. It should not contain any crucial information, as it disappears when the user starts typing.
Use the disabled prop when the user shouldn't be able to manipulate the value of the input.
Use the invalid prop to communicate that validation has failed for this particular text input.
The <TextInput /> also supports the following native InputHTMLAttributes (see props for a full list):
- onBlur
- onFocus
- onChange
- placeholder
- value