Skip to content

Textarea

A labelled multi-line input with an optional hint and error message.

Delivery noteWe pass this to the courier.

import { Textarea } from '@brand-studio/ui';

export default function TextareaDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 380 }}>
      <Textarea label="Delivery note" hint="We pass this to the courier." placeholder="Leave it with the concierge." />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Textarea } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Textarea } from '@brand-studio/ui';

<Textarea label="Delivery note" hint="We pass this to the courier." />

Examples

Error

Pass error to show the message under the field and mark it invalid.

Gift message

Keep it under 120 characters so it fits on the card.

import { Textarea } from '@brand-studio/ui';

export default function TextareaError() {
  return (
    <div style={{ width: '100%', maxWidth: 380 }}>
      <Textarea label="Gift message" defaultValue="Happy birthday! Enjoy three months of fresh coffee, delivered every other Friday, and think of me with every single cup you pour." error="Keep it under 120 characters so it fits on the card." />
    </div>
  );
}

Accessibility

The label is a real <label> tied to the textarea.
hint and error join aria-describedby, so screen readers read them after the label. error also sets aria-invalid.
The box grows with its text up to 20rem where the browser supports field-sizing, and the user can still drag it taller.

API Reference

Prop	Type	Default
`label`	`string`	–
`hint?`	`string`	–
`error?`	`string`	–

Also accepts every TextareaHTMLAttributes<HTMLTextAreaElement> attribute.