Label

The form label.

A <label> with consistent type and a dimmed disabled state. Either tie it with htmlFor or wrap the control.

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

Wrapping a checkbox or switch in a Label makes the text clickable too.

<Label className="flex items-center gap-2">
  <Switch />
  Auto-refresh
</Label>