Toggle Switch Basic

Use --sv-dir, checked, and disabled to configure a switch.

Normal

Reversed Direction

Disabled Checked

Disabled Unchecked

Code

The following example assumes that you have imported the component and set up the theme.

<div class="switch-container">
  <label for="normal-switch">Normal</label>
  <sv-toggle-switch id="normal-switch"></sv-toggle-switch>
</div>

<br />

<div class="switch-container">
  <label for="reversed-switch">Reversed Direction</label>
  <sv-toggle-switch id="reversed-switch" style="--sv-dir: -1"></sv-toggle-switch>
</div>

<br />

<div class="switch-container">
  <label for="disabled-checked">Disabled Checked</label>
  <sv-toggle-switch id="disabled-checked" checked disabled></sv-toggle-switch>
</div>

<br />

<div class="switch-container">
  <label for="disabled-unchecked">Disabled Unchecked</label>
  <sv-toggle-switch id="disabled-unchecked" disabled></sv-toggle-switch>
</div>

<style>
10 collapsed lines
  .switch-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;

    label {
      flex: 1;
      cursor: pointer;
    }
  }
</style>