This package has been deprecated

Author message:

This package has been moved to @w0s/input-switch

@saekitominaga/customelements-input-switch
TypeScript icon, indicating that this package has built-in type declarations

2.4.3 • Public • Published

<input type="checkbox" role="switch"> by custom elements

npm version test status

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

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)

Package Sidebar

Install

npm i @saekitominaga/customelements-input-switch

Weekly Downloads

2

Version

2.4.3

License

MIT

Unpacked Size

56 kB

Total Files

7

Last publish

Collaborators

  • saekitominaga