スイッチSwitchBeta
オン/オフを切り替えるコントロールです。
プレビュー
状態とバリエーション
オフ
機能が無効な状態です。単一設定のオン/オフに使います。
オン
初期値として有効にする場合は defaultChecked を使います。
無効化
切り替えできない理由はツールチップとラベルで示します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| checked | boolean | - | 外部から制御するオン/オフ状態です。 |
| defaultChecked | boolean | - | 初期状態です。 |
| onCheckedChange | (checked: boolean) => void | - | 状態が変わった時に呼ばれます。 |
| disabled | boolean | false | 切り替えできない状態にします。理由はツールチップで補足します。 |
使い方
import { Label, Switch } from "@gunjo/ui";
<div className="flex items-center gap-2">
<Switch id="notifications" defaultChecked />
<Label htmlFor="notifications">メール通知</Label>
</div>設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。