Switch

オンとオフの二値を即時に切り替えるためのフォームコントロール。@base-ui/react ベースで defaultChecked による非制御利用に対応し、保存ボタンを介さず反映される設定に向く。ジョブアンテナでは新着求人メールやスカウト受信などの通知設定、管理画面での求人票の公開切替に使う。

基本

オン・オフ・disabled の各状態と sm サイズ。id と Label の htmlFor を対応させると、ラベルのクリックでも切り替わる。

求職者のマイページで新着求人メール・スカウト受信・いいかも！通知などを切り替える例。設定名の下に補足説明を添え、Switch は行の右端に揃える。

管理画面の求人票一覧で掲載中・公開停止を切り替える例。状態はバッジで示し、行内では sm サイズの Switch を使う。ラベルが視覚的にない場合は aria-label を付ける。