Textarea

InstallationCopy Anchor Link

Installs Field too.

UsageCopy Anchor Link

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

export function DetailsField() {
  return (
    <Field name="details">
      <FieldLabel required>Request details</FieldLabel>
      <Textarea required rows={4} />
      <FieldDescription>Give the plot number and the street name.</FieldDescription>
    </Field>
  );
}

Use Textarea for answers that need more than a line: descriptions, comments, reasons. Set rows for the starting height. Tell people the limit in the helper text, and do not cut text off silently.

AnatomyCopy Anchor Link

• Textarea (<textarea>): the border, fill, text and resize handle in one element.
• The scroll bar is the browser's own; it appears when the text is taller than the box.

ExamplesCopy Anchor Link

StatesCopy Anchor Link

Default, filled, read-only, disabled and error, plus the darker fill without resizing.

ResizingCopy Anchor Link

resize="vertical" (default) shows a handle at the end corner. Use resize="none" when the layout needs a fixed height. The field never resizes sideways.

<Textarea resize="none" rows={6} />

RTLCopy Anchor Link

Text starts on the right and the resize handle sits in the bottom-left corner. Everything follows the page direction.

AccessibilityCopy Anchor Link

• A native <textarea> linked to its Field label, helper text and error.
• Same states as Input: the underline grows from the centre when pressed (half) and focused (full), and there is no outline. A wrapper <div> carries the border and underline because a <textarea> cannot draw one.
• The resize handle can be dragged with a pointer. Keyboard users get the same space by typing; give rows enough height for the expected answer.
• If you show a character limit, put it in the helper text and use maxLength so it is enforced.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• Figma has one fixed-height variant. This one grows with rows and can be resized.
• Lighter and darker have no border at rest, as on Input, including the known gap.

ContrastCopy Anchor Link