Bain Logo

Text Input

Jump 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.

Note for Developers: Right now, the TextInput component does not have any state handling. In other words, it's purely presentational and you just pass in the props like regular HTML inputs. You'll need to handle all state in the parent component.

Import

Use

TextInput fields are made to behave the same as a regular input field.

Layout

They can also be manipulated with most of the styled-system layout, spacing and color props.

Join us!

Get access to all the good stuff by signing up today.

Email Address

Organization

Password

Max 8 chars

States

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.

Font Sizes

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.

Controlled

Below is a simple implementation of a controlled input field.

Value:

Validation

Below is a simple implementation of a controlled input field with validation.

Set a 4-digit pin

Props

This component passes most props directly onto the underlying input element. Thus, you can pass all valid attributes to it. See MDN Docs

  • Props
  • Styled Functions
PropTypeDefaultDescription
borderColorHoverstring

Color of the border when user hovers.

borderColorActivestring

Color of the border when active.

placeholderColorstring

Color of the placeholder text.

placeholderHoverColorstring

Color of the placeholder text when user hovers.

disabledBgColorstring

Background color of the element when disabled.

disabledOpacitynumber

Level of opacity to apply to the element when disabled.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy