7onicDESIGN SYSTEM

Switch

Switchは、設定のオン/オフを即座に切り替えるためのトグルコントロールです。変更が直ちに反映される場合に使用します。

5
Colors
3
Sizes
5
Positions
Radix
Base

Playground

プレビュー
D
Size
Color
Position
Icon
State
Options
<Switch
  label="Dark mode"
/>

Sizes

sm
トラック24×14
サム12px
移動距離10px
フォント12px
Gap8px
default
トラック32×18
サム16px
移動距離14px
フォント14px
Gap10px
lg
トラック40×22
サム20px
移動距離18px
フォント16px
Gap12px

Features

With Label

labelプロップを使って、スイッチにラベルを付与できます。

<Switch label="Dark mode" />
<Switch label="Email notifications" defaultChecked />

Label Position

labelPositionプロップでラベルの配置を変更できます。デフォルトはend（右側）です。

end (default)
start
top
bottom
sides
<Switch label="End" />
<Switch label="Start" labelPosition="start" />
<Switch label="Top" labelPosition="top" />
<Switch label="Bottom" labelPosition="bottom" />
<Switch startLabel="Off" endLabel="On" />

With Icon

checkedIcon / uncheckedIconプロップでサム内にアイコンを表示できます。smサイズでは自動的に非表示になります。

Check / X
Moon / Sun (lg)
<Switch
  checkedIcon={<Check />}
  uncheckedIcon={<X />}
/>

<Switch
  size="lg"
  checkedIcon={<Moon />}
  uncheckedIcon={<Sun />}
  label="Dark mode"
/>

States

Off
On
Disabled Off
Disabled On
<Switch />
<Switch defaultChecked />
<Switch disabled />
<Switch disabled defaultChecked />

API

Props

checkedundefined
boolean

制御モードでのオン/オフ状態

defaultCheckedundefined
boolean

非制御モードでの初期状態

onCheckedChangeundefined
(checked: boolean) => void

状態変更時のコールバック

size"default"
"sm" | "default" | "lg"

スイッチのサイズ

labelundefined
string

スイッチのラベルテキスト

labelPosition"end"
"start" | "end" | "top" | "bottom"

ラベルの配置位置

startLabelundefined
string

スイッチ左側のラベル（sides配置）

endLabelundefined
string

スイッチ右側のラベル（sides配置）

color"default"
"default" | "primary" | "success" | "warning" | "error"

チェック時のトラック色とアイコン色

checkedIconundefined
ReactNode

チェック時にサム内に表示するアイコン

uncheckedIconundefined
ReactNode

未チェック時にサム内に表示するアイコン

disabledundefined
boolean

無効状態

requiredundefined
boolean

必須フィールド

nameundefined
string

フォームのname属性

valueundefined
string

フォームのvalue属性。Radixデフォルト: "on"

Anatomy

1
2
3
Enable notifications
Track width32px
Track height18px
Thumb size16px
1
Track
スイッチの外枠トラック
2
Thumb
スライドするつまみ
3
Label
テキストラベル（任意）

Best Practices

✓

推奨

  • ✓即座に効果が反映される設定に使用する
  • ✓明確なラベルをつけて使用する
  • ✓設定画面のオン/オフ切替に使用する
  • ✓デフォルト状態を慎重に選択する
✕

避けるべき

  • ✗フォーム送信が必要な場合はCheckboxを使用
  • ✗複数選択の場面ではCheckboxを使用
  • ✗ラベルなしで使用しない
  • ✗否定形のラベルを避ける（「無効にする」ではなく「有効にする」）

Accessibility

キーボード操作

Spaceオン/オフ切替
Tabフォーカス移動

ARIA属性

  • role="switch" 自動付与
  • aria-checked 自動管理
  • フォーカスインジケーター
  • label でクリック領域拡大