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

.com

Input with before and after overrides

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

`Warning` `any` `= "Prop types are not shown in dev mode"`

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>