Switch
MD3 switch.
Try it
Knobs
tone size <script> import { Switch } from 'omaris';</script><Switch label="Notifications" />Walkthrough
1. Basic
A switch takes effect immediately. If it needs a Save button, use a checkbox.
<script lang="ts"> import { Switch } from 'omaris'; let wifi = $state(true);</script><Switch label="Wi-Fi" bind:checked={wifi} />2. Settings row
labelPosition="start" gives you the settings-row layout for free.
<script lang="ts"> import { Switch } from 'omaris'; let backup = $state(true); let beta = $state(false);</script><div class="flex w-80 max-w-full flex-col gap-4 px-2"> <Switch class="w-full justify-between" labelPosition="start" label="Automatic backups" description="Every night at 2 AM" bind:checked={backup} /> <Switch class="w-full justify-between" labelPosition="start" label="Beta features" description="May break without warning" bind:checked={beta} /></div>3. Icons and tones
icons puts a tick and a cross in the handle, for a clearer on/off.
<script lang="ts"> import { Switch } from 'omaris';</script><Switch label="With icons" icons checked /><Switch label="Success" tone="success" checked /><Switch label="Small" size="sm" checked /><Switch label="Large" size="lg" checked /><Switch label="Disabled" disabled checked />