Textarea

Multi-line text on a control fill. Resizes vertically.

import { Textarea } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function TextareaBasic() {
  return (
    <Preview stack={true}>
      <Textarea.Root aria-label="Description" />
    </Preview>
  );
}

• Use it for free text that can run over several lines, such as a comment or an issue description. Use an Input for a single line.
• It starts a few lines tall and grows only when the reader drags it.
• Wrap it in a Field for a label and validation; an invalid field gives it a red ring. A bare textarea needs an aria-label.
• variant="field" puts it on a field fill with a thin border, for a textarea inside a List.
• font="mono" sets Nordwand Mono at the code size, for lists of origins, headers or keys.

API

Parts: Root. Other props go to the native textarea. Built on Base UI Field Control.