Textarea

Several lines of text in the same sunken well as Input. It grows with what is typed, so it is a square-cornered box rather than a slab.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/textarea

Examples

In a Field, with a limit

Notes for the courier

It grows as you write.

textarea-field.tsx

import {  Field,  FieldDescription,  FieldError,  FieldLabel,} from "@/components/zero/field";import { Textarea } from "@/components/zero/textarea";export default function TextareaField() {  return (    <Field      className="w-full max-w-md"      validationMode="onChange"      validate={(value) =>        typeof value === "string" && value.length > 140          ? "Keep it under 140 characters."          : null      }    >      <FieldLabel>Notes for the courier</FieldLabel>      <Textarea placeholder="Where to leave it, who to ask for" />      <FieldDescription>It grows as you write.</FieldDescription>      <FieldError />    </Field>  );}

Behaviour

The text is set in the text face, upright, with the accent for a caret. Focus turns the outline yellow; an invalid value turns it red.

Inside a Field it is the Field's control, so the label names it and the Field's validation applies to it.

Props

Textarea

Prop	Type	Default	Description
…	textarea props	—	rows, placeholder, maxLength and the rest go to the textarea.

Also takes every prop of Base UI's Field.Control.