<input type="checkbox" role="switch">
by custom elements
Demo
Examples
<label><x-input-switch
name="foo"
value="1"
checked=""
disabled=""
storage-key="foo"
></x-input-switch> switch</label>
Attributes
-
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 asvalue
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)
Style customization (CSS custom properties)
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) |