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.

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

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

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

<TextInput
  label="Username"
  labelPosition="top"
  value={value}
  onChange={(nextValue) => setValue(nextValue)}
  placeholder="Enter your username"
/>

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

<TextInput
  icon={FaUser}
  value={value}
  onChange={(nextValue) => setValue(nextValue)}
  placeholder="Username"
/>

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

<TextInput
  password
  icon={FaLock}
  value={value}
  onChange={(nextValue) => setValue(nextValue)}
  placeholder="Enter password"
/>

<TextInput state="success" defaultValue="Valid value" />
<TextInput state="warning" defaultValue="Needs review" />
<TextInput state="error" defaultValue="Invalid value" />

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

<TextInput
  outline
  label="Email"
  icon={FaEnvelope}
  value={value}
  onChange={(nextValue) => setValue(nextValue)}
  placeholder="Enter your email"
/>

<TextInput
  label="Display Name"
  ariaDescription="Use between 3 and 20 characters."
  placeholder="Choose a display name"
  maxLength={20}
/>