Components

Textarea

A multi-line text input, styled to match Input — sharp corners, the shared navy focus ring, and the automatic destructive treatment inside an invalid Field. A plain styled <textarea> (Base UI has no textarea primitive), so every native textarea prop is forwarded.

Install

npx shadcn@latest add @alix/textarea

Preview

Usage

<Field label="Scope note" description="Visible to the client.">
  <Textarea rows={4} placeholder="Summarise the request…" />
</Field>

Examples

Different line counts

Rows set the initial writing space while the component keeps the same focus and invalid treatment as Input.

<Textarea rows={3} placeholder="Short client note" />
<Textarea rows={6} placeholder="Detailed scope assumptions" />

Disabled and invalid notes

Native disabled and aria-invalid states work without adding a wrapper component.

<Textarea rows={3} defaultValue="Locked after client approval." disabled />
<Textarea rows={3} placeholder="Explain the change request" aria-invalid />

Scope note field

Field supplies the label and help text while Button gives the form a clear save action.

Scope note

Visible to the client team before kickoff.

<div className="flex flex-col gap-4">
  <Field label="Scope note" description="Visible to the client team before kickoff.">
    <Textarea rows={5} placeholder="Summarise the workstreams, timing, and open decisions." />
  </Field>
  <div>
    <Button>Save note</Button>
  </div>
</div>

When to use it

Use it for

Multi-line notes, risk summaries, client context, and scope assumptions.
Field-wrapped form areas where helper text and errors need accessible wiring.
Native textarea props such as rows, disabled, maxLength, and placeholder.

Reach for something else

Short names, emails, codes, or one-line values — use Input instead.
Inline icons, units, or attached actions — use InputGroup with InputGroupTextarea instead.
Rich article or CMS body copy — use Prose or Text instead.

Props

Prop	Type	Default	Description
rows	number	—	Initial visible line count, like the native attribute.
placeholder	string	—	Ghost text shown while empty.
className	string	—	Merged onto the textarea; every other native textarea prop is forwarded.