Switch

A toggle for settings that take effect at once.

For a setting that applies immediately. If it only takes effect on submit, Checkbox is the better fit.

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

On or off.

Typeboolean

onCheckedChange?(checked: boolean) => void

Fired on change.

Type(checked: boolean) => void

size?"default" | "sm"

Scale.

Type"default" | "sm"

Default"default"

disabled?boolean

Disable interaction.

Typeboolean

Wrap it in a Label so the text is clickable too.