Textarea
A Textarea is a form control for multi-line text.
Table of Contents
Used for this
- 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
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Textarea, Field, Label } from '@zendeskgarden/react-forms'
API
The Textarea component follows this structure:
<Field><Label /><Textarea /></Field>
Field
Extends HTMLAttributes<HTMLDivElement>
A Field provides accessibility attributes to its child Textarea field by associating it with the corresponding Label and Hint.
Label
Extends LabelHTMLAttributes<HTMLLabelElement>
Nest the 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 |
Textarea
Extends TextareaHTMLAttributes<HTMLTextAreaElement>
Nest a Textarea within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | – | Applies inset box-shadow styling on focus |
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 |