primitives

Switch

Toggle that fires its action immediately on flip. Use for settings that take effect right away (theme, notifications). For form-bound booleans that submit on Save use `<Checkbox>`.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/switch.json

Or import from the workspace package:

import { Switch, Label } from "@8maverik8/design";

Examples

Default

Enabled

<Switch checked={on} onCheckedChange={setOn} />

Guidelines

Use Switch when flipping it should immediately persist or take effect.Users perceive switches as live toggles — if a Switch needs a Save button, you've broken that contract.
Use Switch inside multi-step forms.Save-on-submit semantics belong to Checkbox.
Always pair with a `<Label>`. The whole row should be the click target.