Text Area

Textarea is the multi-line text control. It wraps the native <textarea>, so every standard attribute (placeholder, value, rows, disabled, and so on) applies. Reach for it whenever a single line is not enough: notes, descriptions, comments, and other free-form paragraphs.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: textarea.tsx

import { Textarea } from "@beacon/design-system";

// Plain multi-line input. Pass any native textarea attribute.
<Textarea placeholder="Type your message here." />
<Textarea defaultValue="This is some pre-filled content." />
<Textarea disabled placeholder="Disabled textarea" />

Props

Textarea accepts every native <textarea> attribute (it forwards ...props to the element) and forwards its ref to the underlying <textarea>. The most commonly set props:

Prop	Type	Default	Description
placeholder	string	—	Placeholder shown when the field is empty.
value / defaultValue	string	—	Controlled / uncontrolled value.
rows	number	—	Visible line count; the control also has a minimum height.
disabled	boolean	false	Disables the textarea and dims it.
className	string	—	Extra classes merged onto the textarea.

When to use

• Multi-line free-form content: notes, descriptions, comments, internal memos.
• Anywhere the expected answer may run past a single line.

Do not use Textarea for short single-line values such as names or emails; use Input instead. For the label, helper text, and error message around it, wrap the control in Field.