Label

フォーム項目のラベル。

<label> に揃った字送りと、無効時の淡色を足したものです。htmlFor で入力と結び付けるか、入力をそのまま包みます。

export const client = "only";

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

export default function Example() {
  return (
    <div className="flex w-80 flex-col gap-4">
      <div className="grid gap-2">
        <Label htmlFor="name">顧客名</Label>
        <Input id="name" placeholder="Acme 株式会社" />
      </div>
      <Label className="flex items-center gap-2">
        <Checkbox defaultChecked />
        アーカイブ済みも含める
      </Label>
    </div>
  );
}

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

チェックボックスやスイッチは、Label で包むとラベル部分のクリックでも切り替わります。

<Label className="flex items-center gap-2">
  <Switch />
  自動更新
</Label>