Switch

Switchコンポーネントは、オン・オフを切り替えます。状態の切り替えは即時で反映されます。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

CheckBox との違い

Switchは操作時に即時実行されます。Checkboxと異なり、送信ボタンは不要です。

また、未確定(:indeterminate)の状態を持ちません。内部的に role=switch を使っています。

SegmentedControl との違い

Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。

ラベルについて

Switchは基本的にラベルを必要とします。周囲のコンテキストに依って省略できます。

また、利用者が状態を認識しにくくなるため、Switchの状態が切り替わってもラベルは変更しないでください。

Props

dangerouslyLabelHidden
falsetrue

ラベルを視覚的に隠すかどうか

関連リンク