Textarea

Textarea

<Textarea label="Bio" placeholder="A short bio…" rows={6} />

Install: @helixui/core

import { Textarea } from '@helixui/core'

status: stable · since: 0.1.0

Tags: multi-line, input, text

Anatomy

Label
┌──────────────────────────┐
│                          │
│  multi-line input        │
│                          │
└──────────────────────────┘
Help / error

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, default 4 rows
• stackable — true
• fullBleed — false

Visual

A multi-line text input wrapped with built-in label, description, and error message. Resizable vertically by default.

Props

Name	Type	Default	Description
label	ReactNode	—	Visible label.
description	ReactNode	—	Helper text.
errorMessage	string | (v: ValidationResult) => string	—	Error message.
placeholder	string	—	Placeholder.
rows	number	4	Initial visible rows.
resize	'none' | 'vertical' | 'horizontal' | 'both'	vertical	User resize affordance.
...rest	TextFieldProps	—	Forwarded to react-aria’s TextField.

Tokens used

color.bg.surface.default, color.bg.surface.muted, color.border.default, color.border.focus, color.border.danger, color.text.primary, color.text.secondary, color.text.muted, color.text.action.danger, radius.md, space.2, space.3, font.family.sans, font.size.sm, font.size.md, font.weight.medium, font.lineHeight.normal

Accessibility

Notes

• Built on react-aria-components TextField.

Composes with

Component	Relation	Note
Form	parent	Inside Form.
TextInput	alternative	TextInput for single-line.
RichTextEditor	alternative	RichTextEditor for formatted content.
Field	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

comment box

“multi-line comment input”

<Textarea label="Comment" rows={4} value={c} onChange={setC} />

Related

• TextInput
• Field