Textarea

Status: stableAccessibility reviewedtenet-ui@0.4.0

Import

import { Textarea } from 'tenet-ui';

Also accepts every prop of Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>.

Source: src/components/Textarea/Textarea.tsx

Usage guidelines

When to use: multi-line free text (descriptions, comments). Use Textarea inside a FormControl, not a raw <textarea>.

Rules

• Give it an accessible name via FormControl.Label (or aria-label). A placeholder is not a label.
• Use fullWidth to fill width (block is the deprecated 0.3.0 name and warns); use rows for initial height; let users resize vertically (resize="vertical", the default).
• Use invalid for validation state — don’t recolor the border by hand.
• Never hardcode border, padding, or colors — they come from tokens.

Do / Don’t

• ✅ <FormControl><FormControl.Label>Notes</FormControl.Label><Textarea fullWidth /></FormControl>
• ❌ <textarea style={{ border: '1px solid #d0d7de', padding: 8 }} /> — raw element, hardcoded chrome.

See also: TextInput for single-line entry; system guideline forms.

Examples

2 stories for Textarea — open in Storybook

• Default components-textarea--default
• Invalid components-textarea--invalid

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
fullWidth	boolean	—	Stretch to fill the available width.
blockdeprecated	boolean	—	Stretch to fill the available width. Deprecated since 0.4.0. Use fullWidth instead (renamed in 0.4.0). block keeps working until 0.5.0.
invalid	boolean	false	Mark the field invalid (sets aria-invalid and a danger border).
resize	'none' | 'vertical' | 'horizontal' | 'both' TextareaResize	vertical	Which directions the user may resize.
size	'small' | 'medium' | 'large' TextareaSize	medium	Padding / font scale — matches TextInput so fields line up in a form.

Deprecated props keep working for one minor release; the replacement is named in the row.

Related components

• TextInput
• FormControl