UI ComponentsForms
Text Input
Enter text, email addresses, phone numbers, or passwords.
Import
import { TextInput } from "@puzzle-ui/ui";Types and affixes
email and phone provide default leading icons; phone renders a native tel input. Password fields include a show/hide button. Explicit prefix or suffix replaces the default affix; null removes it.
API
| Prop | Type | Default | Description |
|---|---|---|---|
type | "text" | "email" | "password" | "phone" | "text" | Input purpose. |
prefix, suffix | ReactNode | Type-specific | Leading and trailing content. |
value, defaultValue | Native input value | - | Controlled or initial value. |
onChange | ChangeEventHandler<HTMLInputElement> | - | Native change event. |
disabled | boolean | false | Disables input and password visibility button. |
className | string | - | Class on the outer span. |
Other native input attributes and ref apply to the input. Prefix content is decorative and hidden from assistive technology; keep essential units or instructions in the label/description. Always provide a label.