Textarea
<Textarea>TailwindCSS ModulesA multiline text input component. Includes built-in support for labels, hints, validation errors, and character counters.
npx coloxo add textarea --style coloxo-cssimport { Textarea } from '@coloxo/ui';Design Tokens:
1. Variant Matrix
Textareas support various states and configurations out of the box.
| Default | With Hint | With Character Count | Invalid State | |
|---|---|---|---|---|
| States | This is a hint text to help user. | 10/80 | 10/80 Please add more detail. |
2. Interactive Props Configurator
Show Hint
Show Character Count
Invalid / Error State
Disabled State
This is a hint text to help user.
<Textarea label="Manager notes" placeholder="Add context" rows={4} hint="This is a hint text to help user."/>3. Dark theme
Textareas invert gracefully in dark mode, maintaining focus visibility and error legibility.
This is a hint text to help user.
Please add more detail.
4. Enterprise layout compositions
Textareas are often placed alongside other form controls in settings pages or feedback forms.
Project Setup
Describe what this project aims to achieve.
Accessibility
When `showCount` is enabled, the counter is wrapped in an `aria-live="polite"` region, which subtly announces updates to screen readers without interrupting the user's flow.
Just like the Input component, the Textarea automatically links to both its hint and error messages via `aria-describedby`.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Form field label text. |
| hint | ReactNode | — | Helper text displayed below the field. |
| error | ReactNode | — | Validation message; invalid border + trailing error icon. |
| resize | "none" | "vertical" | "horizontal" | "both" | vertical | Resize behavior. |
| showCount | boolean | — | Show current/max length when maxLength is set. |
| maxLength | number | — | Native max length; enables count display with showCount. |
| disabled | boolean | — | Disabled surface. |