Switch

チェックボックスとの違い

押した瞬間に効くものがスイッチです。チェックボックスは送信して初めて効きます。

見た目だけの違いではないので、コンポーネントを分けています。迷ったときは「押したら何か起きるか」で決めてください。

type="checkbox" に role="switch" を足しただけです。 入ったかどうかの申告も、キーボードも、フォームへの載り方もブラウザが持っています。

自分で状態を持っていないので、素のフォームでも register() でもそのまま載ります。

つまみは、入っているときアクセントの塗りの上、切れているとき凹んだ面の上に載ります。地の色が明暗の両極なので、塗りだけでは片方でつまみが背景に埋もれます。

境界が識別を担っています。

何の入り切りかは、スイッチ自身からは分かりません。

<Field layout="inline" id="dark" label="暗い配色にする">
  <Switch name="dark" />
</Field>

不透明度では表しません。 薄めると前景と背景が同時に下地へ寄り、読みやすさの保証が効かなくなります。

通常・空・エッジケースの3つは、どのコンポーネントにも必ずあります。

通常。押した瞬間に効くものに使う。

暗い配色にする

効果音を鳴らす

空。切れているとき。

まだ切れているもの

エッジケース。押せないときと、誤りのとき。

押せない（入っている）

押せない（切れている）

誤りのあるもの

ここは変えられません

Prop

Type

型と説明はコンポーネントのソースから抽出しています。既定値は出していません——cva の defaultVariants は署名に現れないので、表に出すと「引数のデフォルトが書かれているものだけ」になり、嘘になります。