Text input

Text input allows user to enter a single line of text. Set type to handle passwords, emails, dates, URLs, phone numbers, or integers.

#Example

Always pair an input with a form field label so the input is named for everyone, including screen reader users.

#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.

#Warning

A warning border indicates that the input is discouraged, but not disallowed.

#Other types

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

#Integer Input

type="integer" will render an integer input, which is under TextInput and not NumberInput as it expects a string value in order to handle bigints. It only permits numerals and a leading hyphen (for negative values) in the value.

#Size

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

To set the width, use the width prop instead.

#Guidelines

#When to use

• When user input is a single line of free-form text.

#When not to use

• If input can span multiple lines, use a textarea instead.
• If entering a number, use a number input instead. For integers that can exceed JavaScript's safe number range, use type="integer", which stores the value as a string.

#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.
isWarning	—	boolean Indicates that input value is discouraged.
isRequired	—	boolean Indicates that input is required to fill out.
type	—	"text" | "password" | "email" | "date" | "datetime-local" | "number" | "tel" | "time" | "url" | "week" /** Custom, supports bigints */ | "integer" Input type.
value	—	string Input value.
width	"xs"	"xs" | "sm" | "md" | "lg" | "auto" | "100%" Input width.
size	"md"	"sm" | "md" | "lg" Input size.