generic-switch

A switch is a button that toggles between true or false.

API:

name	detail
checked-changed	boolean

name	type
disabled	boolean
checked	boolean
label	string

name	type
checked	boolean

name	description
--generic-switch-focus	Customizes the focus styles of the thumb

name	description
label
thumb
track
button

name	description
default	Provide a label node as lightdom

Usage:

The switch component requires a label, which you can provide as a textnode. You can see an example down below.

Default:

Show code

<generic-switch></generic-switch>

Default

Label:

Show code

<generic-switch label="darkmode"></generic-switch>

Custom label:

Show code

<generic-switch>Custom label</generic-switch>

Custom label

Disabled:

Show code

<generic-switch disabled>Disabled</generic-switch>

Disabled

Checked:

Show code

<generic-switch checked>Checked</generic-switch>

Checked

Checked and disabled:

Show code

<generic-switch checked disabled>Checked and disabled</generic-switch>

Checked and disabled

With a long text in a small place:

Show code

<style>
  generic-switch#narrow {
    display: flex;
    width: 24ch;
  }
  generic-switch#narrow::part(button) {
    flex-shrink: 0;
  }
</style>
<generic-switch checked disabled>Very very loooong text in a small space</generic-switch>

Very very loooong text in a small space