KARAKURIDESIGN SYSTEM

Switch

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

5
Colors
3
Sizes
5
Positions
Radix
Base

Playground

Preview
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プロップスを使って、スイッチにラベルを付与できます。

Label Position

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

end (default)
start
top
bottom
sides

With Icon

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

Check / X
Moon / Sun (lg)

States

Off
On
Disabled Off
Disabled On

API

Props

checkedundefined
boolean

制御モードでのオン/オフStates

defaultCheckedundefined
boolean

非制御モードでの初期States

onCheckedChangeundefined
(checked: boolean) => void

States変更時のコールバック

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

無効States

requiredundefined
boolean

必須フィールド

nameundefined
string

フォームのname属性

valueundefined
string

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