Home

Text area

A multi-line text field that grows with what is typed, from a 96px minimum, with the same edge and focus as the input.

ui.textareacomponents/ui/textarea.tsx

Use case

For the AI

Use it for free text longer than a line: notes from a call with a client, a message to send, delivery instructions on an order, the description of the work on a quote. Put it in a Field with a FieldLabel, and a FieldDescription when there is a limit or a hint.

Use it when

  • Notes, a message, instructions or a description
  • Anything that may run past one line

Use something else when

  • One line of text: Input
  • A text box with a button or a row of actions attached (a composer): Input group

Examples

Code

Import

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

Usage

<Field>
  <FieldLabel>Notes</FieldLabel>
  <Textarea placeholder="What did they say on the call?" />
  <FieldDescription>Only your team sees these notes.</FieldDescription>
</Field>

Rules

  • Every Textarea is named: a FieldLabel in the same Field, or aria-label.
  • It grows with its content (field-sizing-content): do not give it a fixed height.
  • Mark an error with aria-invalid (or invalid on its Field).
  • Do not add a border or ring: focus is the darker edge and grey halo.