Text Input

The Text Input component is used for single-line text input with support for icons, password toggle and more.

Usage


const [value, setValue] = useState("");

<TextInput
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Enter text..."
/>

Sortable data table
Prop	Type	Default	Description
placeholder	string	Enter text	Placeholder text when the input is empty.
password	boolean	false	If true, renders the input as a password field with toggle.
readOnly	boolean	false	If true, the input is read-only.
disabled	boolean	false	Disables the input field.
autocomplete	boolean	false	If true, enables browser autocomplete.
outline	boolean	false	If true, renders an outlined variant of the input.
icon	React.ElementType	-	Optional icon displayed inside the input field.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme for the input's appearance.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for the input field.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow style for the input field.
state	"success" \| "error" \| "warning"	-	Validation state appearance for the input.
ariaLabel	string	-	Custom ARIA label for accessibility.
ariaDescription	string	-	Custom ARIA description for screen readers.
data-testid	string	"text-input"	Test ID for the root element (for testing utilities).