Switch
オン/オフを即時に切り替えるスイッチコンポーネントです。機能の有効/無効や表示切替をユーザー操作で即座にシステムに反映させるときに使います。
使用上の注意
Checkbox との違い
Switchは操作時に即時実行されます。Checkboxと異なり、送信ボタンは不要です。
また、未確定（:indeterminate）の状態を持ちません。内部的に role=switch を使っています。
SegmentedControl との違い
Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。
ラベルの表示
Switchは基本的にラベルを必要とします。周囲のコンテキストによって省略できます。
また、利用者が状態を認識しにくくなるため、Switchの状態が切り替わってもラベルは変更しないでください。
レイアウト
[WIP] モバイル
モバイルで自動的に切り替わるようにコンポーネントを改修予定です。
Switchは小さくモバイルでは操作しづらいため、サイズを大きくしてください。
使い方チェックリスト
Switch
参照元：使用上の注意 > SegmentedControl との違い 「使用上の注意 > SegmentedControl との違い」の本文へ移動
- Must異なる状態（オン/オフ以外）を表す場合は Switch ではなく SegmentedControl を使う
参照元：使用上の注意 > ラベルの表示 「使用上の注意 > ラベルの表示」の本文へ移動
- MustSwitch にはラベルをつける
- 周囲のコンテキストによって省略できる
- Switch の状態が切り替わってもラベルは変更しない
参照元：レイアウト > [WIP] モバイル 「レイアウト > [WIP] モバイル」の本文へ移動
- Mustモバイルでは Switch のサイズを大きくする
Props
unrecommendedLabelHidden
false true
ラベルを視覚的に隠すかどうか