スイッチSwitchBeta

オン/オフを切り替えるコントロールです。

プレビュー

状態とバリエーション

オフ

機能が無効な状態です。単一設定のオン/オフに使います。

オン

初期値として有効にする場合は defaultChecked を使います。

無効化

切り替えできない理由はツールチップとラベルで示します。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
checkedboolean-外部から制御するオン/オフ状態です。
defaultCheckedboolean-初期状態です。
onCheckedChange(checked: boolean) => void-状態が変わった時に呼ばれます。
disabledbooleanfalse切り替えできない状態にします。理由はツールチップで補足します。

使い方

import * as React from "react";
import { Label, Switch } from "@gunjo/ui";

export function NotificationSettingSwitch() {
  const [enabled, setEnabled] = React.useState(true);

  return (
    <div className="flex items-center gap-2">
      <Switch
        id="notifications"
        checked={enabled}
        onCheckedChange={setEnabled}
      />
      <Label htmlFor="notifications">メール通知</Label>
    </div>
  );
}

設計の判断

  • 役割を素の button に自分で付けた。資料は「見た目がスイッチでも役割が無ければ、読み上げは単なるボタンとしか言わない」を崩れた形に挙げています。GUNJO は button に role と aria-checked を付けています。チェックボックスの入力欄を使わなかったのは、つまみの動きを justify-start と justify-end の入れ替えで作っているためで、チェックと入り切りの意味の違いもここではっきりします。
  • ラベルを部品の中に入れて、名前を必ず持たせた。資料は「ラベルの無いスイッチ単体」を禁止に挙げています。label を渡すと aria-labelledby で結んだ文字が横に出て、その文字を押しても切り替わります。description は aria-describedby で結びます。何も渡さなければ素のスイッチだけを返すので、その場合は呼ぶ側で名前を付けることになります。
  • 待っている間の状態は持っていません。資料は「通信が終わるまでは待機の見た目にして、連打を防ぐ」を挙げています。GUNJO の Switch に待機はなく、disabled で止めるところまでです。入りと切りの2つは設計の元データから生成された SwitchVariantKey なので、3つ目の状態を足すには元データの側から変えることになります。

使用コンポーネント

SwitchLabel

関連コンポーネント

CheckboxToggleToggleGroupForm

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Switch