Textarea
A flexible multi-line text input with character counting and validation states. Designed for collecting longer form content with accessibility in mind.
Component Setup
Create or update your Textarea component
Copy this code to create your Textarea component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Character Counter
Track and limit the number of characters with a built-in counter component.
Disabled State
Textareas can be disabled to prevent user interaction.
Error State
Display error states to indicate validation issues or input errors.
Full Example
A complete example with label, textarea, character counter, and hint text.
This is a hint text to help user.
API Reference
The Textarea component is a custom implementation built with native HTML textarea elements and enhanced with additional features like character counting and custom resizing.
Textarea.Root
The main textarea component that users interact with.
| Prop | Type | Default | Description |
|---|---|---|---|
error | "boolean" | "false" | When true, applies error styling to the textarea. |
value | "string" | "undefined" | The controlled value of the textarea. |
defaultValue | "string" | "undefined" | The default value of the textarea when initially rendered. |
onChange | "function" | "undefined" | Event handler called when the textarea value changes. |
disabled | "boolean" | "false" | When true, prevents the user from interacting with the textarea. |
className | "string" | "undefined" | Additional CSS classes to apply to the textarea. |
Textarea.CharCounter
A component that displays the current character count and optional maximum limit.
| Prop | Type | Default | Description |
|---|---|---|---|
current | "number" | "undefined" | The current character count. If not provided, it will be calculated from the textarea value. |
max | "number" | "undefined" | The maximum allowed character count. If not provided, no limit is displayed. |
className | "string" | "undefined" | Additional CSS classes to apply to the character counter. |