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 as an uncontrolled component with a default value

Input compact size

Input with all available states




Input with enhancers

@

.00

$
.00

Search

@
.com

Input with before and after overrides

Search

Search

Input mask

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 UI in 'disabled' state.

error boolean = false

Renders UI in 'error' state.

id string required

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

"data-baseweb" string

$ref object required

current union required One of
HTMLInputElement,
null

inputRef object required

A ref to access an input element.

current union required One of
HTMLInputElement,
null

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

overrides object required

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

placeholder string required

required boolean = false

Renders UI in 'required' state.

size $Keys<typeof SIZE> = "default"

Renders UI in provided size.

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

type string required

Input type attribute.

value string

Input value attribute.

rows number

overrides object = {}

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

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

SyntheticFocusEventHTMLInputElement => mixed

onBlur function = () => undefined

SyntheticFocusEventHTMLInputElement => mixed