Component size, gzipped: 24kb

Input

API

An input enables a person to type in text information.

When to use

  • When a person should provide information to the application.

Examples

Basic usage

States





Sizes



Enhancers

@

.00

$
.00

Search

@
.com

Before and After overrides

Search

Search

Alert

Check

MaskedInput

Masking an input can lead to accessibility problems. Screen-readers will read out the value of the input on focus and change events. With masking, an input's value might make visual sense, but sound strange when read aloud.

Consider if you can format the value of the input on a blur event, rather than on change events. This still gives users visual feedback but also provides a much smoother experience for someone using a screenreader.

Clearable

Clear value

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 for passwords

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.

Please note, that by default the component will use the autocomplete="new-password" attribute. You can change that by providing the autoComplete property to the component, like autoComplete="current-password". You can read more about this decision here.

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

<Input
type="password"
overrides={{
MaskToggleButton: () => null,
}}
/>

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

<Input
type="password"
overrides={{
MaskToggleHideIcon: () => '🙈',
MaskToggleShowIcon: () => '🐵',
}}
/>

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

Overrides usage

Focus and ref

Create/Delete Tags

hello

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.

Stateful (uncontrolled) usage

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

API

Input props

NameTypeDescription
adjoined
Defines styles for inputs that are grouped with other controls.
aria-describedby
string
Sets aria-describedby attribute.
aria-label
string
Sets aria-label attribute.
aria-labelledby
string
Sets aria-labelledby attribute.
autoComplete
Determines if browser should provide value suggestions.
autoFocus
If true the input will be focused on the first mount.
clearable
If true, adds a clear value icon button to the end of the input container.
disabled
Renders component in disabled state.
endEnhancer
An input helper rendered after and attached to the input field.
error
Renders component in error state.
id
Id attribute value to be added to the input element and as a label's for attribute value.
inputMode
A hint as to the type of data that might be entered by the user while editing the element or its contents.
inputRef
A ref to access an input element.
max
max value when used as input type=number
min
min value when used as input type=number
name
Name attribute.
onBlur
Called the onBlur event triggers.
onChange
Called when input value is changed.
onFocus
Called the onFocus event triggers.
onKeyDown
Called the onKeyDown event triggers.
onKeyPress
Called the onKeyPress event triggers.
onKeyUp
Called the onKeyUp event triggers.
overrides
Lets you customize all aspects of the component.
pattern
A regex that is used to validate the value of the input on form submission.
placeholder
Input's placeholder.
positive
Renders component in positive state.
required
Renders component in required state.
size
Renders component in provided size.
startEnhancer
An input helper rendered before and attached to the input field.
type
Input type attribute.
value
Input value attribute.

Input exports

You can import this module like so:

import {StatefulInput} from 'baseui/input'

It exports the following components or utility functions: