Switch
Accessible on/off toggle with optional label, bindable checked state, and remote-form support.
With label
Two-way bind the checked state. The placeholder is shown to the left of the pill.
checked = true
import { Switch } from '@mediayard/agoratopia-ui/components/switch';
let same_as_shipping = $state(true);
<Switch bind:checked={same_as_shipping} placeholder="Same as shipping address" /> Without label
Omit the placeholder to render just the pill.
checked = false
<Switch bind:checked={notifications} /> Disabled
<Switch checked placeholder="Disabled toggle" disabled />