Switch

即時に効く設定のトグル。

その場で効く設定の切り替えです。フォームを送信して初めて効く項目には Checkbox の方が適しています。

export const client = "only";

import { useState } from "react";
import { Switch, Label } from "@squadbase/vantage/ui";

export default function Example() {
  const [auto, setAuto] = useState(true);
  return (
    <div className="flex flex-col gap-4">
      <Label className="flex items-center gap-3">
        <Switch checked={auto} onCheckedChange={setAuto} />
        30 秒ごとに自動更新
      </Label>
      <Label className="flex items-center gap-3">
        <Switch size="sm" />
        小さいサイズ
      </Label>
    </div>
  );
}

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

PropType

checked?boolean

オン/オフ。

Typeboolean

onCheckedChange?(checked: boolean) => void

変更時。

Type(checked: boolean) => void

size?"default" | "sm"

大きさ。

Type"default" | "sm"

Default"default"

disabled?boolean

操作を無効にする。

Typeboolean

ラベルは Label で包むと、文字の側を押しても切り替わります。