Switch

Overview

Switch component has same behaviour than checkbox.

You can notice that the difference is only the design.

The switch listener is @change. It will give you the checked value and the field’s name.

A pretty good behaviour is the ability to update label.

See examples below to know how to customize it.

Copied !

---
import Switch from "$components/switch/Switch.astro";
---

<div class="grid grid-cols-2 gap-4">
  <div class="p-4 border rounded-lg bg-white w-52">
    <Switch
      label="Enable Feature"
      name="switch-example"
      id="switch-example"
      @change="console.log($event.detail)"
      class="[&>button]:h-6"
    />
  </div>
  <div class="p-4 border rounded-lg bg-white w-52">
    <Switch
      label="Primary Label"
      name="switch-example-primary"
      id="switch-example-primary"
      @change="console.log($event.detail)"
      variant="primary"
      class="[&>button]:h-4 [&>button>span]:h-8 [&>button>span]:w-8"
    />
  </div>
  <div class="p-4 border rounded-lg bg-white w-52">
    <Switch
      label="Secondary Label"
      name="switch-example-secondary"
      id="switch-example-secondary"
      @change="console.log($event.detail)"
      variant="secondary"
      class="[&>button]:h-6"
    />
  </div>
  <div class="p-4 border rounded-lg bg-white w-52">
    <Switch
      label="Label on Left"
      name="switch-example-success"
      id="switch-example-success"
      @change="console.log($event.detail)"
      variant="success"
      class="[&>button]:h-6 flex-row-reverse"
    />
  </div>
  <div class="p-4 border rounded-lg bg-white w-52">
    <Switch
      label="Danger Label"
      name="switch-example-danger"
      id="switch-example-danger"
      @change="console.log($event.detail)"
      variant="danger"
      class="[&>button]:h-6"
    />
  </div>
  <div class="p-4 border rounded-lg bg-white w-52">
    <Switch
      label="Info Label"
      name="switch-example-info"
      id="switch-example-info"
      @change="console.log($event.detail)"
      variant="info"
      class="[&>button]:h-6"
    />
  </div>
  <div class="p-4 border rounded-lg bg-white w-52">
    <Switch
      label="Warning Label"
      name="switch-example-warning"
      id="switch-example-warning"
      @change="console.log($event.detail)"
      variant="warning"
      class="[&>button]:h-6"
    />
  </div>
  <div class="p-4 border rounded-lg bg-white w-32">
    <Switch
      label="Off"
      name="switch-example-warning"
      id="switch-example-warning"
      @change={`
        label = $event.detail.checked ? 'On' : 'Off';
        console.log($event.detail)
        `}
      variant="success"
      class="[&>button]:h-4 [&>button]:rounded [&>button>span]:w-4 [&>button>span]:h-8"
    />
  </div>
</div>