WebTUI

Displays a switch

1	<label>
2	<input type="checkbox" is-="switch" />
3	Switch
4	</label>

Import

@import "@webtui/css/components/switch.css";

<label>
    <input type="checkbox" is-="switch" />
    Switch
</label>

Use the checked attribute to set the initial value of the switch checkbox

1
2	<label>
3	<input type="checkbox" is-="switch" />
4	Unchecked
5	</label>
6	<label>
7	<input type="checkbox" is-="switch" checked />
8	Checked
9	</label>
10

Use the disabled attribute to disable the switch

1
2	<label>
3	<input type="checkbox" is-="switch" disabled />
4	Disabled
5	</label>
6	<label>
7	<input type="checkbox" is-="switch" checked disabled />
8	Checked Disabled
9	</label>
10

Use the size- attribute to set the size of the switch

1
2	<label>
3	<input type="checkbox" is-="switch" size-="small" />
4	Small
5	</label>
6	<label>
7	<input type="checkbox" is-="switch" />
8	Default
9	</label>
10

Set the bar- attribute to thin or line to set the size of the switch bar

1
2	<label>
3	<input type="checkbox" is-="switch" />
4	Default
5	</label>
6	<label>
7	<input type="checkbox" is-="switch" bar-="thin" />
8	Thin Bar
9	</label>
10	<label>
11	<input type="checkbox" is-="switch" bar-="line" />
12	Line Bar
13	</label>
14

#my-switch-input {
  --switch-thumb-color: var(--foreground0);
  --switch-track-color: var(--background1);
}

To extend the Checkbox stylesheet, define a CSS rule on the components layer

@layer components {
  input[type="checkbox"][is-="switch"] {
    /* ... */
  }
}

input[type="checkbox"][is-="switch"] {
  /* ... */
}