Textarea

Takes text over several lines, like a description or a comment.

Library

Installation

pnpm dlx shadcn@latest add @wisty/textarea

The CLI installs the Radix or Base UI file to match your project.

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

Create an app with TextareaBuild in Wisty to publish inside Salesforce in minutes. Nothing to deploy.Open in Wisty

When to use

Use it

People type text that may run over several lines, like a case description, a comment or notes.
The text has no fixed format.

Don't use it

The value fits on one line, like a name or an email address. Use Input.
People pick from known values. Use Select or Combobox.
The field needs a count or a send button inside its frame. Use Input group with InputGroupTextarea.

Usage

Label it with a FieldLabel inside a Field, or a Label linked through htmlFor.

import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

<div className="grid gap-1">
  <Label htmlFor="comments">Internal comments</Label>
  <Textarea id="comments" name="comments" />
</div>

It starts two lines tall and grows with its text. For a taller start, use a min-h-* class, not rows: browsers that grow the field ignore rows.

Examples

States

An escalation reason with its error from `aria-invalid`, `disabled` internal notes and a `readOnly` resolution.

API reference

`Textarea`

Also takes every <textarea> (opens in a new tab) prop.

SLDS mapping

Textarea is slds-textarea, with the input's frame and colors.

Known gaps:

SLDS's textarea stays at its rows height. This one grows with its text. For a fixed height, add field-sizing-fixed and set rows.

Accessibility

Name it with a visible label. A placeholder isn't a label.
Point aria-describedby at help text or an error message, and say in the error how to fix the value.
Use readOnly, not disabled, for text people should read or copy. A disabled textarea leaves the tab order and doesn't submit.

Responsive behavior

It fills its container's width and grows with its text, which pushes the layout below it down. Set a max-h-* class to cap it; past that it scrolls.
Browsers without field-sizing keep it two lines tall, scrolling. People can still drag it taller.
On touch screens the text is larger, so iOS Safari doesn't zoom in on focus. Don't set a smaller text size on it.

Rules

Show errors with aria-invalid. Don't add border or color classes.