Input

An input enables a person to type in text information.

When to use

• When a person should provide information to the application.

Examples

When clearable is true, pressing the Escape key or clicking the clear icon on the right will clear the input's current value. Other input components such as Textarea, PhoneInput, and PaymentCard also respect the clearable property.

Input has some built-in logic when you set type to "password". A button is added to the right side of the input which, when activated, toggles the masking of the inputʼs current text. Allowing users to see the text they have entered is considered a usability best practice so we have built-in this behavior.

If you want to opt-out of this behavior, you can override the toggle with a null component:

<Password
  overrides={{
    MaskToggleButton: () => null,
  }}
/>

You can also use overrides to customize the icons used in the toggle:

<Password
  overrides={{
    MaskToggleHideIcon: () => '🙈',
    MaskToggleShowIcon: () => '🐵',
  }}
/>

Note, if all you want to do is change the icons, you could update your theme instead.

In the example above we use overrides to add "tag" functionality to our input. Type a phrase and press enter to create a new tag. Use backspace to remove tags.

As with many of our components, there is also an uncontrolled version, StatefulInput, which manages its own state.

API

Input exports

You can import this module like so:

import {StatefulInput} from 'baseui/input'

It exports the following components or utility functions:

• StatefulInput
• StatefulContainer
• Input
• BaseInput
• MaskedInput
• StyledRoot
• StyledInputEnhancer
• StyledStartEnhancer
• StyledEndEnhancer
• StyledInputContainer
• StyledInput
• STATE_CHANGE_TYPE
• ADJOINED
• SIZE
• CUSTOM_INPUT_TYPE