Textarea

The multi-line text input.

Multi-line input. The props are the native <textarea> ones.

export const client = "only";

import { Textarea, Label } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="grid w-80 gap-2">
      <Label htmlFor="note">メモ</Label>
      <Textarea id="note" rows={4} placeholder="この数字について気づいたことを書く" />
    </div>
  );
}

import { Textarea } from "@squadbase/vantage/ui";

Set the height with rows or className (min-h-32 and friends). aria-invalid turns it the error colour, exactly as with Input.

For a toolbar above or below, pair InputGroup’s InputGroupTextarea with align="block-end".