TextInput

Single-line text input field.

Examples

Default

Name

<ControlledTextInput {...args} />

With Icon And Clear

Name

Clear Name

<ControlledTextInput {...args} />

Sizes

Small

Medium

Large

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <ControlledTextInput label="Small" placeholder="Small input" size="sm" />
  <ControlledTextInput
    label="Medium"
    placeholder="Medium input"
    size="md"
  />
  <ControlledTextInput label="Large" placeholder="Large input" size="lg" />
</div>

Disabled

Name

<ControlledTextInput {...args} />

Loading

Name

<ControlledTextInput {...args} />

With Description

NameEnter your legal first and last name

<ControlledTextInput {...args} />

Label Hidden

Name

<ControlledTextInput {...args} />

Required

Name · Required

<ControlledTextInput {...args} />

Optional

Name · Optional

<ControlledTextInput {...args} />

With Label Tooltip

Name

Your full legal name as it appears on official documents

<ControlledTextInput {...args} />

With End Content

Amount

USD

<ControlledTextInput {...args} />

Status Variants

Error

This field is required

Warning

This name is already taken

Success

Username is available

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <ControlledTextInput
    label="Error"
    status={{message: 'This field is required', type: 'error'}}
    value=""
  />
  <ControlledTextInput
    label="Warning"
    status={{message: 'This name is already taken', type: 'warning'}}
    value="admin"
  />
  <ControlledTextInput
    label="Success"
    status={{message: 'Username is available', type: 'success'}}
    value="ada_lovelace"
  />
</div>

Email Type

Email

<ControlledTextInput {...args} />

API

TextInput

Single-line text input field.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
autoComplete	string	—	HTML autocomplete hint for the browser.
className	string	—	Additional CSS class names applied to the field root, or to the input wrapper when the input is inside an InputGroup.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text rendered below the label.
endContent	ReactNode	—	Content rendered after the input, before the status icon.
hasAutoFocus	boolean	false	Whether to focus the input on mount.
hasClear	boolean	false	Whether to show a clear button when the input has a value.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip shown beside the label.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input loses focus.
onChange*	( value: string, event: ChangeEvent<HTMLInputElement> | null, ) => void	—	Called with the next string value.
onEnter	() => void	—	Called when Enter is pressed.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input gains focus.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	—	Keyboard event handler for the input.
placeholder	string	—	Placeholder text.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	—	Visual size.
startIcon	IconComponent	—	Icon shown before the input.
status	InputStatus	—	Status displayed on the field.
style	CSSProperties	—	Inline styles applied to the field root, or to the input wrapper when the input is inside an InputGroup.
type	"text" | "email" | "password"	—	HTML input type.
value*	string	—	Controlled input value.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
autoComplete	string	—	HTML autocomplete hint for the browser.
className	string	—	Additional CSS class names applied to the field root, or to the input wrapper when the input is inside an InputGroup.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text rendered below the label.
endContent	ReactNode	—	Content rendered after the input, before the status icon.
hasAutoFocus	boolean	false	Whether to focus the input on mount.
hasClear	boolean	false	Whether to show a clear button when the input has a value.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip shown beside the label.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input loses focus.
onChange*	( value: string, event: ChangeEvent<HTMLInputElement> | null, ) => void	—	Called with the next string value.
onEnter	() => void	—	Called when Enter is pressed.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input gains focus.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	—	Keyboard event handler for the input.
placeholder	string	—	Placeholder text.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	—	Visual size.
startIcon	IconComponent	—	Icon shown before the input.
status	InputStatus	—	Status displayed on the field.
style	CSSProperties	—	Inline styles applied to the field root, or to the input wrapper when the input is inside an InputGroup.
type	"text" | "email" | "password"	—	HTML input type.
value*	string	—	Controlled input value.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
autoComplete	string	—	HTML autocomplete hint for the browser.
className	string	—	Additional CSS class names applied to the field root, or to the input wrapper when the input is inside an InputGroup.
data-testid	string	—	Test ID applied to the input element.
description	ReactNode	—	Supporting text rendered below the label.
endContent	ReactNode	—	Content rendered after the input, before the status icon.
hasAutoFocus	boolean	false	Whether to focus the input on mount.
hasClear	boolean	false	Whether to show a clear button when the input has a value.
htmlName	string	—	HTML name attribute.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is loading.
label*	string	—	Field label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip shown beside the label.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input loses focus.
onChange*	( value: string, event: ChangeEvent<HTMLInputElement> | null, ) => void	—	Called with the next string value.
onEnter	() => void	—	Called when Enter is pressed.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input gains focus.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	—	Keyboard event handler for the input.
placeholder	string	—	Placeholder text.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
size	"sm" | "md" | "lg"	—	Visual size.
startIcon	IconComponent	—	Icon shown before the input.
status	InputStatus	—	Status displayed on the field.
style	CSSProperties	—	Inline styles applied to the field root, or to the input wrapper when the input is inside an InputGroup.
type	"text" | "email" | "password"	—	HTML input type.
value*	string	—	Controlled input value.
isOptional	false	—
isRequired*	true	—