Text Input

A text input field that allows users to enter and edit single-line text.

Loading demo: text-input-real-world

Installation

npx sdaia-ui@latest add text-input

import { TextInput } from "@/components/ui/input"

<TextInput placeholder="Enter value..." />

The standard text input for general form use.

Loading demo: text-input-default

Use `type="Search Box"` for search inputs with a leading icon and clear button.

Loading demo: text-input-search

Use `type="Trailing Button"` to combine the input with an inline action button.

Loading demo: text-input-trailing-button

Use `size="Large"` for prominent placements.

Loading demo: text-input-large

Use `size="Medium"` for standard form density. This is the default.

Loading demo: text-input-medium

Use `state="Disabled"` to prevent interaction with the field.

Loading demo: text-input-disabled

Props for the TextInput component.

Prop	Type	Default	Required
dir	'ltr' \| 'rtl'	—	optional
label	string	—	optional
helperText	string	—	optional
error	string	—	optional
size	"medium" \| "large"	"large"	optional
variant	'default' \| 'search-box' \| 'leading-dropdown' \| 'trailing-dropdown' \| 'leading-text' \| 'trailing-button' \| 'input-button'	'default'	optional
prefix	ReactNode	—	optional
suffix	ReactNode	—	optional
prefixBordered	boolean	—	optional
suffixBordered	boolean	—	optional
clearable	boolean	—	optional
onClear	() => void	—	optional
tags	TagItem[]	—	optional
onTagRemove	(id: string) => void	—	optional
fullWidth	boolean	—	optional
leadingDropdownLabel	string	—	optional
onLeadingDropdownClick	() => void	—	optional
trailingDropdownLabel	string	—	optional
onTrailingDropdownClick	() => void	—	optional
leadingText	string	—	optional
trailingButtonLabel	string	—	optional
trailingButtonIcon	ReactNode	—	optional
onTrailingButtonClick	() => void	—	optional
actionButtonLabel	string	—	optional
onActionButtonClick	() => void	—	optional