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.

#Icon

A leading icon can name the kind of value an input takes, like a link or a phone number. It doesn't replace the label: the input still needs a form field or aria-label. The icon scales with size.

#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	—	booleanDetermines whether input is disabled and doesn't respond to any user interactions.
isReadOnly	—	booleanDetermines whether input can be interacted with, but value can't be changed.
isInvalid	—	booleanIndicates that input value is invalid.
isWarning	—	booleanIndicates that input value is discouraged.
isRequired	—	booleanIndicates 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.
icon	—	ComponentType<SVGAttributes<SVGElement>>Leading icon, rendered inside the field. Use it to name the kind of value the field takes; it is decorative, so the input still needs a label.
value	—	stringInput value.
width	"xs"	"xs" | "sm" | "md" | "lg" | "auto" | "100%"Input width.
size	"md"	"sm" | "md" | "lg"Input size.
onFocus	—	InputHTMLAttributes<HTMLInputElement>["onFocus"]Called when the input receives focus.
onBlur	—	InputHTMLAttributes<HTMLInputElement>["onBlur"]Called when the input loses focus.
onChange	—	InputHTMLAttributes<HTMLInputElement>["onChange"]Called when the input value changes. For type="integer", non-integer characters are stripped from the value before the handler runs.