➤ wl-switch

Turn an option on or off.

➤ Properties

Property	Attribute	Type	Default	Description
`ariaChecked`	`aria-checked`	`string`		Aria checked attribute.
`checked`	`checked`	`boolean`	false	Checks the switch.
`disabled`	`disabled`	`boolean`	false	Disables the element.
`name`	`name`	`string`		Name of the native form element.
`readonly`	`readonly`	`boolean`	false	Makes the element readonly (disabled but tabbable)
`required`	`required`	`boolean`	false	Makes the element required in a form context.
`role`	`role`	`AriaRole`	"checkbox"	Role of the switch.
`value`	`value`	`string`	""	Value of the form element.

Event	Description
`change`	Dispatched when the checked property changes due to a user interaction.

Property	Description
`--switch-bg`	Default background
`--switch-bg-checked`	Background when checked
`--switch-bg-disabled`	Background when disabled
`--switch-bg-disabled-checked`	Background when disabled and checked
`--switch-border-radius`	Border radius
`--switch-color`	Default color
`--switch-color-checked`	Color when checked
`--switch-color-disabled`	Color when disabled
`--switch-color-disabled-checked`	Color when disabled and checked
`--switch-height`	Height
`--switch-knob-border-radius`	Border radius of the knob
`--switch-knob-elevation`	Box shadow of the knob
`--switch-knob-size`	Width and height of the knob
`--switch-knob-transition`	Transition of the knob
`--switch-ripple-transform`	Transform of the ripple
`--switch-transition`	Transition
`--switch-width`	Width

Go here to try the demo.


Andreas Mehlsen	You?

Licensed under MIT.