Forms
TextField
Text input with a floating label, notched border, helper text, adornments, and multiline support. The password type adds a visibility toggle.
Examples
Label and helper text
Loading preview
<TextField label="Email" placeholder="you@epcvip.com" helperText="We never share it" />API
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | none | Floating label. |
type | 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | text | Input type. |
helperText / errorMessage | ReactNode | none | Helper or error text. |
error | boolean | false | Error treatment. |
multiline / rows | boolean / number | false | Render as a textarea. |
Guidelines
Do
- Always pair an input with a label.
- Use errorMessage to explain how to fix the error.
Avoid
- Do not use placeholder as a replacement for a label.