Implement something like <input type=checkbox switch>

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/input-switch": "...",
      "@w0s/shadow-append-css": "..."
    }
  }
</script>
<script type="module">
  import InputSwitch from '@w0s/input-switch';

  customElements.define('x-input-switch', InputSwitch);
</script>

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

Attributes

Style customization

The following CSS custom properties can be used to customize the style.

| name | deault | Description | | ---------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | --outline-offset | 1px | outline-offset property value of switch control | | --block-size | 1em | Block size of switch control | | --inline-size | 2em | Inline size of switch control | | --animation-duration | 0.5s | Time a transition animation (transition-duration property) | | --track-color-on | #2299ff | Track color when switch is on | | --track-color-off | #cccccc | Track color when switch is off | | --track-color-disabled-on | #666666 | Track color when switch is on disabled | | --track-color-disabled-off | #666666 | Track color when switch is off and disabled | | --thumb-radius | calc(0.5em - 1px) | Radius of slider ball | | --thumb-color | #ffffff | Color of slider ball |

The shadow DOM of the switch looks like this.

<x-input-switch class="my-switch">
  #shadow-root (open)
  <div part="track"></div>
  <div part="thumb"></div>
</x-input-switch>

Therefore, the ::part CSS pseudo-element may be used to customize the style as desired.

.my-switch {
  --outline-offset: ...;
  --block-size: ...;
  ...

  &::part(track) {
    ...
  }

  &::part(thumb) {
    ...
  }
}

However, customizations other than CSS custom properties may be broken in future version updates.