Switch
A control that allows the user to toggle between checked and not checked.
Loading preview…
1<script lang="ts">
2 import { Label } from '../label/index.js';
3 import { Switch } from './index.js';
4</script>
5
6<div class="flex items-center space-x-2">
7 <Switch id="airplane-mode" />
8 <Label for="airplane-mode">Airplane Mode</Label>
9</div>
10Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/switch/index.ts
- ~/components/switch/switch.svelte
Usage
Use switch for binary on/off settings. Bind checked and pair with a label via matching id / for.
Set size to sm or default.
1<script lang="ts">
2 import { Label } from '~/components/label';
3 import { Switch } from '~/components/switch';
4</script>
5
6<div class="flex items-center space-x-2">
7 <Switch id="airplane-mode" />
8 <Label for="airplane-mode">Airplane Mode</Label>
9</div>