Documentation Index
Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt
Use this file to discover all available pages before exploring further.
Package: @zendeskgarden/react-forms
import { Field, Textarea } from '@zendeskgarden/react-forms';
When to use it
- To let users enter multi-line text.
- For single-line text, use Input instead.
Basic usage
By default, Textarea height is fixed.
import React from 'react';
import { Field, Textarea } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Shrub</Field.Label>
<Textarea />
</Field>
);
export default Example;
Auto-expand
Use minRows and maxRows to allow the Textarea to grow automatically as the user types.
import React from 'react';
import { Field, Textarea } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Soil notes</Field.Label>
<Textarea minRows={2} maxRows={12} />
</Field>
);
export default Example;
minRows sets the minimum visible rows. maxRows caps the height after which the textarea begins to scroll.
Manual resizing
Add isResizable to provide a drag handle, letting users manually resize the textarea.
import React from 'react';
import { Field, Textarea } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Ivy notes</Field.Label>
<Textarea isResizable />
</Field>
);
export default Example;
Hidden label
Textarea labels can be visually hidden while remaining accessible to screen readers.
import React from 'react';
import { Field, Textarea } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label hidden>Description</Field.Label>
<Textarea placeholder="Describe the plant..." />
</Field>
);
export default Example;
Validation states
Pass the validation prop to both Textarea and Field.Message.
import React from 'react';
import { Field, Textarea } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant description</Field.Label>
<Textarea validation="success" />
<Field.Message validation="success">Description looks great</Field.Message>
</Field>
);
export default Example;
import React from 'react';
import { Field, Textarea } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant description</Field.Label>
<Textarea validation="warning" />
<Field.Message validation="warning">Description is very short</Field.Message>
</Field>
);
export default Example;
import React from 'react';
import { Field, Textarea } from '@zendeskgarden/react-forms';
const Example = () => (
<Field>
<Field.Label>Plant description</Field.Label>
<Textarea validation="error" />
<Field.Message validation="error">Description is required</Field.Message>
</Field>
);
export default Example;
Component structure
<Field>
<Field.Label />
<Field.Hint />
<Textarea />
<Field.Message />
</Field>
API reference
Wraps the Textarea and its label, hint, and message. Associates child elements for accessibility.
Field.Label
Renders a <label> associated with the Textarea.
Visually hides the label while keeping it accessible to screen readers.
Field.Hint
Renders supplementary hint text. Nest inside Field.
Field.Message
Renders a validation message. Nest inside Field.
body.validation
'success' | 'warning' | 'error'
Determines the icon and color of the message.
Textarea
A Garden-styled <textarea> element. Nest inside Field.
Minimum number of visible rows. Enables auto-expand when set together with maxRows.
Maximum number of rows before the textarea scrolls instead of expanding.
Adds a drag handle so users can manually resize the textarea.
Renders a smaller Textarea with reduced padding.
body.validation
'success' | 'warning' | 'error'
Applies validation border styling to the Textarea.
Prevents user interaction and removes the element from the tab order.