Switch

Switching sides.

Example

Props

🕹️ standard props
value
boolean
Current state of the switch
undefined
disabled
boolean
Whether the switch is disabled
false
🎨 style props
--switch-width
size
Width of the switch
42px
--switch-height
size
Height of the switch
22px
--switch-handle-width
size
Diameter of the switch handle
16px
--switch-handle-color
color
Color of the switch handle
#ffffff
--switch-translate-x
size
Translation distance when switched on
20px
--switch-active-box-shadow
shadow
Box shadow for the active state
inset 0 0 0 2px rgb(var(--global-color-primary-500))
--switch-active-background-color
color
Background color for the active state
rgb(var(--global-color-primary-500))
--switch-inactive-box-shadow
shadow
Box shadow for the inactive state
inset 0 0 0 2px rgb(var(--global-color-contrast-200))
--switch-inactive-background-color
color
Background color for the inactive state
rgb(var(--global-color-contrast-50))
--switch-disabled-inactive-box-shadow
shadow
Box shadow for the inactive disabled state
inset 0 0 0 2px rgb(var(--global-color-contrast-400))
--switch-disabled-inactive-background-color
color
Background color for the inactive disabled state
rgb(var(--global-color-contrast-100))
--switch-disabled-inactive-handle-color
color
Handle color for the inactive disabled state
rgb(var(--global-color-contrast-400))
--switch-disabled-active-box-shadow
shadow
Box shadow for the active disabled state
inset 0 0 0 2px rgb(var(--global-color-primary-400))
--switch-disabled-active-background-color
color
Background color for the active disabled state
rgb(var(--global-color-primary-300))
--switch-disabled-active-handle-color
color
Handle color for the active disabled state
#eeeeee

Slots

No data available

Events

onchange

Fired when the switch value changes

Attribute	Type	Description
nativeEvent	Event & { currentTarget: EventTarget & HTMLInputElement }	The native DOM event
value	boolean	The new state of the switch