npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { Switch } from '@thrivecart/ui';Simple on/off toggle
<div className="flex items-center gap-2">
<Switch id="airplane-mode" />
<Label htmlFor="airplane-mode" className="font-normal">Airplane Mode</Label>
</div>Non-interactive switch
<div className="flex items-center gap-2">
<Switch disabled checked />
<Label className="font-normal text-ink-light">Feature locked</Label>
</div>Always include a visible label that describes what the switch controls.
Switches should apply changes immediately without requiring a save action.
For form fields that get submitted, use Checkbox instead of Switch.
Avoid labels like "Disable notifications." Use positive framing: "Enable notifications."
role="switch" with aria-checked for state.id and htmlFor.