Textarea

複数行のテキスト入力。

複数行の入力です。props はネイティブの <textarea> と同じです。

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";

高さは rows か className（min-h-32 など）で決めます。aria-invalid を付けるとエラー色になるのは Input と同じです。

上下にツールバーを付けたいときは、InputGroup の InputGroupTextarea と align="block-end" の組み合わせが使えます。