Text Input

Text input allows user to enter text.

#Example

#Usage

#Disabled

Input should be disabled, when input shouldn't be allowed to be interacted with.

#Read only

Compared to a disabled input, read only input is usually used for values that user might want to copy to clipboard.

#Invalid

Invalid input indicates that value isn't what the system expects.

#Other types

TextInput accepts a type prop, which accepts the same values as type attribute of an input tag.

#Size

The size prop impacts font-size and height. Default is set to md.

To set the width, use the width prop instead.

#Guidelines

#Content

• Use sentence case for placeholder text.
• End placeholder text with three dots.

#Props

Inherits margin props.

Name	Default	Description
isDisabled	—	boolean Determines whether input is disabled and doesn't respond to any user interactions.
isReadOnly	—	boolean Determines whether input can be interacted with, but value can't be changed.
isInvalid	—	boolean Indicates that input value is invalid.
isRequired	—	boolean Indicates that input is required to fill out.
type	—	"text" | "password" | "email" | "date" | "datetime-local" | "number" | "tel" | "time" | "url" | "week" Input type.
value	—	string Input value.
width	"xs"	"xs" | "sm" | "md" | "lg" | "auto" | "100%" Input width.
size	"md"	"sm" | "md" | "lg" Input size.