TextInput

Single-line text input field.

Examples

Default

Name

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

With Icon And Clear

Name

Clear Name

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

Sizes

Small

Medium

Large

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<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

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

Loading

Name

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

With Description

NameEnter your legal first and last name

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

Label Hidden

Name

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

Required

Name · Required

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

Optional

Name · Optional

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

With Label Tooltip

Name

Your full legal name as it appears on official documents

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

With End Content

Amount

USD

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

Status Variants

Error

This field is required

Warning

This name is already taken

Success

Username is available

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<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

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

Phone Type

Phone numberFor international numbers, include the country code.

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

Read Only

Name

function ControlledTextInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledTextInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);

  return (
    <TextInput
      {...args}
      {...getNecessity(isOptional, isRequired)}
      onChange={setValue}
      value={value}
    />
  );
}

<ControlledTextInput {...args} />

API

TextInput

Single-line text input field.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
aria-activedescendant	AriaAttributes['aria-activedescendant']	—	Identifies the currently active element in a composite widget controlled by the input.
aria-autocomplete	AriaAttributes['aria-autocomplete']	—	Indicates whether typing displays completion suggestions.
aria-controls	AriaAttributes['aria-controls']	—	Identifies the element controlled by the input.
aria-required	boolean	—	Announces the input as required to assistive technology without showing the Required marker, for fields whose requirement is already obvious. isRequired implies it.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
role	AriaRole	—	ARIA role applied 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" | "tel" | "email" | "password"	—	HTML input type.
value*	string	—	Controlled input value.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
aria-activedescendant	AriaAttributes['aria-activedescendant']	—	Identifies the currently active element in a composite widget controlled by the input.
aria-autocomplete	AriaAttributes['aria-autocomplete']	—	Indicates whether typing displays completion suggestions.
aria-controls	AriaAttributes['aria-controls']	—	Identifies the element controlled by the input.
aria-required	boolean	—	Announces the input as required to assistive technology without showing the Required marker, for fields whose requirement is already obvious. isRequired implies it.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
role	AriaRole	—	ARIA role applied 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" | "tel" | "email" | "password"	—	HTML input type.
value*	string	—	Controlled input value.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
aria-activedescendant	AriaAttributes['aria-activedescendant']	—	Identifies the currently active element in a composite widget controlled by the input.
aria-autocomplete	AriaAttributes['aria-autocomplete']	—	Indicates whether typing displays completion suggestions.
aria-controls	AriaAttributes['aria-controls']	—	Identifies the element controlled by the input.
aria-required	boolean	—	Announces the input as required to assistive technology without showing the Required marker, for fields whose requirement is already obvious. isRequired implies it.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
role	AriaRole	—	ARIA role applied 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" | "tel" | "email" | "password"	—	HTML input type.
value*	string	—	Controlled input value.
isOptional	false	—
isRequired*	true	—