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