Switchスイッチ

オン/オフの2つの状態を切り替えるためのコンポーネントです。設定画面などでその状態を視覚的に伝えることができます。

更新 2024/11/1

サンプル

スイッチのオン/オフはイベントのトリガーとなります。onCheckedChangeハンドラで、イベント処理を実装してください。

スイッチラベル

import { Switch } from "@serendie/ui";
import { useState } from "react";

export function TypeSample() {
  const [checked, setChecked] = useState(false);
  const handleClick = () => {
    setChecked(!checked);
  };

  return (
    <Switch
      checked={checked}
      onCheckedChange={handleClick}
      label={"スイッチラベル"}
    />
  );
}

状態

5種類の状態があります。非活性とする際はdisabled propsを使用してください。

Enabled: スイッチラベル
Checked: スイッチラベル
Disabled: スイッチラベル
Selected - Disabled: スイッチラベル
Focused: スイッチラベル

import { Switch } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <Switch label={"スイッチラベル"} />
      </Dd>
      <Dt>Checked</Dt>
      <Dd>
        <Switch checked={true} label={"スイッチラベル"} />
      </Dd>
      <Dt>Disabled</Dt>
      <Dd>
        <Switch checked={false} disabled label={"スイッチラベル"} />
      </Dd>
      <Dt>Selected - Disabled</Dt>
      <Dd>
        <Switch checked={true} disabled label={"スイッチラベル"} />
      </Dd>
      <Dt>Focused</Dt>
      <Dd>
        <Switch checked={false} data-focus label={"スイッチラベル"} />
      </Dd>
    </Dl>
  );
}