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

Demo

• Demo page

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)