Textarea
A labeled <textarea> with optional description, error message, asterisk, and user-resize control. API mirrors TextInput.
Default
<Textarea label="Your message" placeholder="Write your message here..." />With description and error
Maximum 500 characters.
Feedback is required.
<Textarea
label="Bio"
description="Maximum 500 characters."
placeholder="Tell us about yourself"
/>
<Textarea
label="Feedback"
withAsterisk
error="Feedback is required."
/>Resize
<Textarea label="Vertical resize" resize="vertical" />
<Textarea label="Both directions" resize="both" />
<Textarea label="No resize" resize="none" />Sizes
<Textarea size="xs" label="xs" rows={2} />
<Textarea size="md" label="md" rows={2} />
<Textarea size="xl" label="xl" rows={2} />Disabled
<Textarea label="Disabled" disabled value="Cannot be edited" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Associates label with textarea via HTML for/id |
label | ReactNode | — | Label rendered above the textarea |
description | ReactNode | — | Helper text below the label |
error | ReactNode|boolean | — | Error message; pass true for styles only |
required | boolean | — | Marks as required and adds asterisk |
withAsterisk | boolean | — | Adds asterisk without native required attribute |
disabled | boolean | — | Disables the textarea |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Font size via design tokens |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius |
placeholder | string | — | Placeholder text |
value | string | — | Pre-fills the textarea (uncontrolled SSR) |
name | string | — | Form field name |
rows | number | 4 | Number of visible text rows |
resize | 'none'|'vertical'|'horizontal'|'both' | 'none' | Controls whether the user can resize the textarea |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |