input-switch Demo

Explicit label

<x-input-switch id="input-switch-1"></x-input-switch> <label for="input-switch-1">switch</label>

switch

Implicit label

<label><x-input-switch></x-input-switch> switch</label>

switch

checked attribute

<label><x-input-switch checked=""></x-input-switch> switch</label>

switch

disabled attribute

<label><x-input-switch disabled=""></x-input-switch> switch</label>

switch

disabled and checked attribute

<label><x-input-switch disabled="" checked=""></x-input-switch> switch</label>

switch

storage-key attribute

<label><x-input-switch storage-key="foo"></x-input-switch> switch</label>

switch

Form submission

<form>
  <p><label><x-input-switch name="switch1" value="1"></x-input-switch> switch</label></p>
  <p><label><x-input-switch name="switch2" value="1" checked=""></x-input-switch> switch</label></p>
  <p><button>Submit</button> <button type="reset">Reset</button></p>
</form>

* Values are not sent in browsers that do not support ElementInternals. As of February 2024, Firefox 93+, Safari 16.4+ and Chrome 77+ is supported.

Style customization

switch