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.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Field, Label, Textarea } from '@zendeskgarden/react-forms'
API
Field
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
id | string | – | Sets the field ID and the prefix for the generated label, input, and hint IDs |
Label
Extends LabelHTMLAttributes<HTMLLabelElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | – | Applies regular (non-bold) font weight |
Textarea
Extends TextareaHTMLAttributes<HTMLTextAreaElement>
| 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 | VALIDATION | – | Applies validation state styling |