Switch — Vue

---
import Switch from '../components/astro/Switch.astro';
---

<Switch label="Enable notifications" client:load />

<!-- Rizzo CSS. Toggle state via JS (aria-pressed, class switch--pressed). -->
<label class="switch">
  <input type="checkbox" class="switch__input" />
  <span class="switch__track"></span>
</label>

<script>
  import { Switch } from '$lib/rizzo';
  let checked = $state(false);
</script>

<Switch label="Enable notifications" bind:checked />

<script setup>
import { ref } from 'vue';
import Switch from '@/components/rizzo/Switch.vue';
</script>

<template>
  <Switch
    v-model:checked="checked"
    label="Enable notifications"
  />
</template>

import { useState } from 'react';
import { Switch } from './components/react';

const [checked, setChecked] = useState(false);
<Switch
  label="Enable notifications"
  checked={checked}
  onCheckedChange={setChecked}
/>