Textarea

A multi-line text field, styled like Input and wired into a Field the same way. It grows with its content (field-sizing: content) and can be resized vertically.

Installation

npx rasengan-ui add textarea

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/textarea.json

Usage

import { Field, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";
 
export function Feedback() {
  return (
    <Field>
      <FieldLabel>What changed?</FieldLabel>
      <Textarea placeholder="Tell the team what changed…" />
    </Field>
  );
}

Variants

The input's three variants: default, filled and underline.

Sizes

sm, default and lg set the padding, the text and the starting height (4, 6 and 8 lines' worth); the textarea then grows with its content. Inside a Field, it takes the Field's size and variant.

Villages

Radius, border, padding and background are the input's: a form mixing both looks of a piece.

Accessibility

• A <textarea>, rendered by Base UI's Field control: a Field labels and describes it.
• Invalid and disabled states work as on Input.

API reference

The props of <textarea>, plus:

textareaVariants({ variant, size }) returns its classes.