switch

➤ 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 | undefined		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.

➤ Events

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

➤ CSS Custom Properties

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

➤ Usage

Go here to try the demo.

➤ Contributors

Andreas Mehlsen	You?

➤ License

Licensed under MIT.