<input type="checkbox" role="switch"> by Custom Elements

Implement something like <input type="checkbox" role="switch"> by Custom Elements.

Demo

<label><x-input-switch
  name="foo"
  value="1"
  checked=""
  disabled=""
  storage-key="foo"
></x-input-switch> switch</label>

name [optional]: Name of the element to use for form submission. (Same as name attribute of <input> Element)
value [optional]: Value of the form control. If omitted, the value is "on". (Same as value attribute of <input> Element)
checked [optional]: Whether the control is checked. (Same as checked attribute of <input> Element)
disabled [optional]: Whether the form control is disabled. (Same as disabled attribute of <input> Element)
storage-key [optional]: Save this value as localStorage key when switching controls. (value is `true` or `false` depending on the check state)

name	deault	Description
--switch-width	3.6em	Outer frame width
--switch-height	1.8em	Outer frame height
--switch-padding	0.2em	Spacing between the outer frame and the sphere (Negative value can be specified)
--switch-bgcolor-on	#2299ff	Background color when `on`
--switch-bgcolor-off	#cccccc	Background color when `off`
--switch-bgcolor-disabled-on	#666666	[disabled] Background color when `on`
--switch-bgcolor-disabled-off	#666666	[disabled] Background color when `off`
--switch-ball-color	#ffffff	Slider sphere color (background property)
--switch-animation-duration	0.5s	Time a transition animation (transition-duration property)
--switch-outline-mouse-focus	none	Focus indicator on mouse-focus (outline property)