Form Inputs
Text Field
A text field allows a user to enter a plain text value with a keyboard.
A text field allows a user to enter a plain text value with a keyboard.
Placeholder text#
Disabled#
Read only#
As textarea#
Copy button#
Quiet#
Label, description and error#
We will never share your address.
Enter a valid email address.
Component props#
| Name | Type | Description |
|---|---|---|
| label | string | Label text displayed above the field |
| description | ReactNode | Helper text rendered below the field and linked with aria-describedby |
| error | ReactNode | Error message rendered below the field. Sets aria-invalid and role="alert" |
| placeholder | string | Placeholder text |
| value | string | Controlled value |
| defaultValue | string | Default value (uncontrolled) |
| variant | TextFieldVariant | "quiet" | "none" |
| asTextArea | boolean | Renders as a textarea instead of input |
| resize | ResizeDirection | "vertical" | "horizontal" | "both" | "none" |
| allowCopy | boolean | Shows a copy button |
| isReadOnly | boolean | Makes the field read-only |
| isDisabled | boolean | Disables the field |
| onChange | (value: string) => void | Called when value changes |