Text InputJump to Props
Take input from the user
The TextInput component enables the user to interact with and input content and data. The form input allows you to create various text style inputs such as text, password, email, number, url, search and more.
TextInput fields are made to behave the same as a regular input field.
They can also be manipulated with most of the styled-system layout, spacing and color props.
Get access to all the good stuff by signing up today.
Max 8 chars
Right now, the states are manually set by simply changing the borderColor to the corresponding color in the theme. The theme is where the functional colors like success, warning and `error are set.
Whilst it is possible to do, you should try to maintain a consistent scale for input. Try to avoid overriding the default font size, but if you need to, use the standard fontSize prop.
Below is a simple implementation of a controlled input field.
Below is a simple implementation of a controlled input field with validation.
Set a 4-digit pin
This component passes most props directly onto the underlying input element. Thus, you can pass all valid attributes to it. See MDN Docs
Color of the border when user hovers.
Color of the border when active.
Color of the placeholder text.
Color of the placeholder text when user hovers.
Background color of the element when disabled.
Level of opacity to apply to the element when disabled.