Textarea

Multi-line text input with field styling aligned to Input and other form controls.

Installation

The component is exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

Use a single Textarea for free-form multi-line text:

Textarea

Pair with Label (htmlFor / id) or Field so the control has an accessible name. For single-line values, use Input instead.

Usage

import { Label, Textarea } from '@by/experience-system';

Textarea is a client component ('use client'). Use it inside a Client Component or a dynamic import when using the Next.js App Router.

<Label htmlFor="message">Message</Label>
<Textarea id="message" name="message" rows={4} placeholder="Write something…" />

Surface variant: inset vs flat

inset (default): use for standalone multi-line fields when you want the recessed inset shadow on its own.
flat: use next to Input, Select, combobox-style controls, or InputGroup so the textarea matches their surface (no inset shadow).

<Field>
  <FieldLabel htmlFor="notes">Notes</FieldLabel>
  <Textarea id="notes" variant="flat" rows={4} />
</Field>

Examples

Overview

Default styling with a placeholder (same preview as at the top of the page).

API Reference

Textarea renders a native <textarea> and forwards props to the DOM. For the full attribute and behavior matrix, see MDN — <textarea>.

Textarea

Prop	Type	Default
`variant`	`'inset' \| 'flat'`	`'inset'`
`className`	`string`	—

Also accepts standard textarea attributes (rows, cols, name, value, defaultValue, placeholder, disabled, readOnly, required, maxLength, minLength, wrap, autoComplete, aria-invalid, event handlers, …).

When aria-invalid is true and the control is not readOnly, Textarea applies the same invalid surface styling as Input (pair with Field / FieldError for messaging).

Data attribute	Values
`data-slot`	`textarea`

Accessibility

Associate every Textarea with a visible Label (or aria-label when a visible label is not practical). Do not rely on placeholder alone for the accessible name. Describe validation errors with Field / aria-describedby. See MDN — Textarea accessibility.

Source in the repo: packages/experience-system/src/components/Textarea/Textarea.tsx. Agent-oriented contracts: packages/experience-system/src/components/Textarea/Textarea.instructions.md.

Textarea

On this page