Textarea
A Textarea is a form control for multi-line text.
- To enter multi-line text
How to use it
Default
By default, textarea height is fixed.
Auto-expand
Textarea height can be configured to resize automatically based on user input.
Hidden label
Textarea labels can be hidden.
Manual resizing
Drag handles can be applied to a textarea for manual resizing.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Textarea, Field } from '@zendeskgarden/react-forms'
API
The Textarea component follows this structure:
<Field><Field.Label /><Textarea /></Field>
Field
A Field provides accessibility attributes to its child Textarea field by associating it with the corresponding Field.Label and Field.Hint.
Field.Hint
Extends HTMLAttributes<HTMLDivElement>
Nest a Hint within a Field component.
Field.Label
Extends LabelHTMLAttributes<HTMLLabelElement>
Nest a Label within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
hidden | boolean | Hides the label visually without hiding it from screen readers | |
isRegular | boolean | Applies regular (non-bold) font weight |
Field.Message
Extends HTMLAttributes<HTMLDivElement>
The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
validation | 'success' | 'warning' | 'error' | Applies validation state styling | |
validationLabel | string | Defines the aria-label for the validation icon |
Textarea
Extends TextareaHTMLAttributes<HTMLTextAreaElement>
Nest a Textarea within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | Applies inset | |
isBare | boolean | Removes borders and padding | |
isCompact | boolean | Applies compact styling | |
isResizable | boolean | Enables manual vertical resize | |
maxRows | number | Defines the maximum height in rows | |
minRows | number | Defines the minimum height in rows | |
validation | 'success' | 'warning' | 'error' | Applies validation state styling |