Default
default.tsx
const [value, setValue] = useState("");
<TextInput
value={value}
onChange={(nextValue) => setValue(nextValue)}
placeholder="Enter text..."
/>Text Input
The Text Input component supports single-line text entry with theming, validation states, icons, labels, password visibility toggling, and accessibility features for flexible input handling.
Usage & Examples
With Label
with-label.tsx
const [value, setValue] = useState("");
<TextInput
label="Username"
labelPosition="top"
value={value}
onChange={(nextValue) => setValue(nextValue)}
placeholder="Enter your username"
/>With Icon
with-icon.tsx
const [value, setValue] = useState("");
<TextInput
icon={FaUser}
value={value}
onChange={(nextValue) => setValue(nextValue)}
placeholder="Username"
/>Password Input
password-input.tsx
const [value, setValue] = useState("");
<TextInput
password
icon={FaLock}
value={value}
onChange={(nextValue) => setValue(nextValue)}
placeholder="Enter password"
/>Validation States
validation-states.tsx
<TextInput state="success" defaultValue="Valid value" />
<TextInput state="warning" defaultValue="Needs review" />
<TextInput state="error" defaultValue="Invalid value" />Outlined Input
outlined-input.tsx
const [value, setValue] = useState("");
<TextInput
outline
label="Email"
icon={FaEnvelope}
value={value}
onChange={(nextValue) => setValue(nextValue)}
placeholder="Enter your email"
/>With Accessible Description
with-accessible-description.tsx
<TextInput
label="Display Name"
ariaDescription="Use between 3 and 20 characters."
placeholder="Choose a display name"
maxLength={20}
/>