Textarea

Implemented

Multi-line text input with fixed rows (default 4) and resize-y — it does NOT auto-grow. Optional char counter, helper text, and error state. Focus indication is painted directly via `focus:ring-2 focus:ring-ep-teal focus:border-ep-teal`; `focus:outline-none` suppresses the browser's default outline so a single focus indicator is visible. Same label/error/required contract as Input. Note: the props array below is partial — showCounter, helperText, error, and required are documented in the interface string but not yet mirrored as props rows.

Categoryatoms

Sourcepatterns/atoms/textarea.html

AI HintMulti-line labelled input with optional character counter (showCounter + maxLength), helper text and error wiring mirroring the Input atom.

Multi-line text input with label, helper text, error state. FR-CA: Zone de texte multiligne.

TextArea

Interactive atom (Family 1 — Tier 1)

Always renders a visible label. Pair with a character counter when limits matter.

Description de l'event

Motif du remboursement

Champ requis

This component supports light and dark mode.

Interactive demo

Biographie

0/280 caracteres

Usage

import { TextArea } from '@epasslive/design-system'

<TextArea label="Biographie" value={bio} onChange={setBio} rows={4} maxLength={280} helperText={`${bio.length}/280 caracteres` }/>

Accessibility

Native <textarea> with htmlFor label association.
Helper + error bind via aria-describeby.
Required adds an asterisk to the label and aria-required.

Props

Prop

Type

Default

Description

label*

string

—

Visible and announced label.

value*

string

—

Controlled value.

onChange*

(value: string) => void

—

Change handler.

placeholder

string

—

Placeholder text ✅ decorative only.

rows

number

4

Initial visible rows.

helperText

string

—

Helper copy.

error

string

—

Validation message announced via aria-describedby.

required

boolean

false

Marks the field required.

maxLength

number

—

Hard character limit.

ariaLabel

string

—

Override the announced label.

Props

Preview

Textarea

Prop

Type

Required

Default

Description

label

string

Required

—

No description.

value

string

Required

—

No description.

onChange

(value: string) => void

Required

—

No description.

Quick use:<Textarea />

Accessibility

ARIA roletextbox

Usage

Import

tsxSnippet

import { Textarea } from "@epasslive/design-system"

Example 1

tsxSnippet

<Textarea />

Example 2

tsxSnippet

<Textarea variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms