Switch

Displays a switch

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

Import

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

Usage

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

Examples

Checked/Unchecked

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

<label>
  <input type="checkbox" is-="switch" />
  Unchecked
</label>
<label>
  <input type="checkbox" is-="switch" checked />
  Checked
</label>

Disabled

Use the disabled attribute to disable the switch

<label>
  <input type="checkbox" is-="switch" disabled />
  Disabled
</label>
<label>
  <input type="checkbox" is-="switch" checked disabled />
  Checked Disabled
</label>

Size

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

<label>
  <input type="checkbox" is-="switch" size-="small" />
  Small
</label>
<label>
  <input type="checkbox" is-="switch" />
  Default
</label>

Bar Size

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

<label>
  <input type="checkbox" is-="switch" />
  Default
</label>
<label>
  <input type="checkbox" is-="switch" bar-="thin" />
  Thin Bar
</label>
<label>
  <input type="checkbox" is-="switch" bar-="line" />
  Line Bar
</label>

Reference

Properties

• --switch-thumb-color: The color of the switch thumb
• --switch-track-color: The color of the switch track

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

Extending

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

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

Scope

• All native <input type="checkbox"> elements with is-="switch"

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