Input

An input enables a person to type in text information.

When to use

  • When a person should provide information to the application.

Input basic usage

Input as an uncontrolled component

Input sizes



Input as an uncontrolled component with a default value

Input with all available states





Input with enhancers

@

.00

$
.00

Search

@
.com

Input with before and after overrides

Search

Search

Alert

Check

Input mask

Input with 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 with overrides

Input Focus with a ref

Create/Delete Tags

Type a word and press enter to create a tag. Use backspace to remove tags.
hello

Additionally, you can fully customize any part of the Input through the overrides prop. The Input consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

$
.00

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Input API

"aria-label" nullable string required

Sets aria-label attribute.

"aria-labelledby" nullable string required

Sets aria-labelledby attribute.

"aria-describedby" nullable string required

Sets aria-describedby attribute.

adjoined $Keys<typeof ADJOINED> required

Defines styles for inputs that are grouped with other controls.

$Keys{ none: "none", left: "left", right: "right", both: "both" }

autoComplete string = "on"

Determines if browser should provide value suggestions.

autoFocus boolean = false

If true the input will be focused on the first mount.

disabled boolean = false

Renders component in 'disabled' state.

error boolean = false

Renders component in 'error' state.

positive boolean

Renders component in 'positive' state.

pattern nullable string required

A regex that is used to validate the value of the input on form submission.

id string required

Id attribute value to be added to the input element and as a label's for attribute value.

"data-baseweb" string

inputMode string required

A hint as to the type of data that might be entered by the user while editing the element or its contents.

inputRef ElementRef<*> required

A ref to access an input element.

ElementRef*

name string = ""

onBlur function required

SyntheticFocusEvent<T> => mixed

onChange function

SyntheticInputEvent<T> => mixed

onKeyDown function

SyntheticKeyboardEvent<T> => mixed

onKeyPress function

SyntheticKeyboardEvent<T> => mixed

onKeyUp function

SyntheticKeyboardEvent<T> => mixed

onFocus function required

SyntheticFocusEvent<T> => mixed

clearable boolean required

If true, adds a clear value icon button to the end of the input container.

overrides object required

InputContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Before { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
After { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIconContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

placeholder string required

required boolean = false

Renders component in 'required' state.

size $Keys<typeof SIZE> = "default"

Renders component in provided size.

$Keys{ default: "default", compact: "compact", large: "large" }

type string required

Input type attribute.

value string

Input value attribute.

rows number

overrides object = {}

InputContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Before { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
After { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIconContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
StartEnhancer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
EndEnhancer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

startEnhancer nullable union = null

An input helper rendered before and attached to the input field.

One of
Node,
* => Node

endEnhancer nullable union = null

An input helper rendered after and attached to the input field.

One of
Node,
* => Node

onFocus function = () => undefined

Handler for the focus event.

SyntheticFocusEventHTMLInputElement => mixed

onBlur function = () => undefined

Handler for the blur event.

SyntheticFocusEventHTMLInputElement => mixed