<input-switch>

What is it?

Examples of use

• HTML

  <input-switch id="switch-0" label='Switch 1 (with no icon)' icons="none" style="font-size: 3rem"></input-switch>

  Output

• HTML

  <input-switch id="switch-1" label='Switch 2 (with "on" icon only)' checked icons="checked" style="font-size: 3rem"></input-switch>

  Output

• HTML

  <input-switch id="switch-2" label='Switch 3 (with "on" and "off" icons)' icons="both" style="font-size: 3rem"></input-switch>

  Output

• HTML

  <form>
    <input-switch id="switch-3" label='Switch 4 (in form)' checked icons="checked unchecked" name="switch" style="font-size: 3rem"></input-switch>
  </form>

  Output

• HTML

  <label for="switch-4">
      Labeled
      <input-switch id="switch-4" icons="checked unchecked"></input-switch>
    </label>

  Output

  Labeled

• HTML

  <label for="switch-5" dir="rtl">
    Right-to-left
    <input-switch id="switch-5" icons="checked" checked></input-switch>
  </label>

  Output

  Right-to-left

• HTML

  <label for="switch-6">
    Readonly
    <input-switch id="switch-6" readonly></input-switch>
  </label>

  Output

  Readonly

• HTML

  <label for="switch-7">
    Disabled
    <input-switch id="switch-7" checked disabled></input-switch>
  </label>

  Output

  Disabled

...