スイッチ （ 概要 ）
スイッチは、切り替えたら即座に反映される設定項目のためのコントロールUIです。反映されたことがその場で目視により把握できる設定内容で使用できます。
ユースケース
- オン・オフを切り替えるとき
- 表示フィルターのオン・オフや、位置情報の利用許可など、切り替えた結果をその場で確認できる設定に使用します。
- 2つの選択肢のどちらかに切り替えるとき
- 表示単位の切り替え（摂氏・華氏）や表示形式の切り替え（リスト表示・カレンダー表示）など、両方の選択肢にラベルを表示し、切り替えた結果をその場で確認できる場合に使用します。
注意が必要なケース
- その場で結果が分からない場合はチェックボックスやラジオボタンを使う
- スイッチを操作したその場で結果が分からないものには、スイッチを使わずチェックボックスやラジオボタンを使ってください。
- 選択後に確定操作が必要な場合はチェックボックスやラジオボタンを使う
- 保存ボタンや送信ボタンなどの確定動作を要するものには、スイッチを使わずチェックボックスやラジオボタンを使ってください。
関連コンポーネント
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | Figmaデザインデータ（v2） | 提供中 |
| HTML版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 | |
| React版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 |