Textarea Input
Commonly used textarea input component.
Installation
npx wdc add textareaExamples
Basic Usage
Standard multiline text input.
Validation States
Visual feedback for error and success states.
Disabled
Prevents user interaction.
API Reference
| Input | Type | Default | Description |
|---|---|---|---|
| label | string | '' | Label displayed above the textarea. |
| placeholder | string | '' | Placeholder text. |
| rows | number | 3 | Number of visible text lines. |
| error | string | null | null | Error message text. Changes border to red. |
| success | boolean | false | If true, changes border to green. |
| hint | string | null | null | Helper text displayed below the textarea. |
check_circle
SEO & Accessibility
This component uses the following:
- Association: The component generates a unique ID (wdc-textarea-1) and links the
<label>viaforand the error message viaaria-describedby. This ensures screen readers announce "Label, Invalid entry: Error message" seamlessly. - Resizing: The default behavior allows vertical resizing (browser default). You can disable this via class if needed (
class="resize-none").
Check out Google Search Central for more details.