Switch

You might be looking for:

• Checkbox

  Check one or more options independently.

• Radio Group

  Pick exactly one from a visible set.

Playground

<div className="flex items-center gap-2"> <Switch id="notify" /> <Label htmlFor="notify">Email notifications</Label></div>

Usage

import { Label } from "@sophic/portal-ui/components/ui/label";
import { Switch } from "@sophic/portal-ui/components/ui/switch";

<div className="flex items-center gap-2">
  <Switch id="notify" checked={on} onCheckedChange={setOn} />
  <Label htmlFor="notify">Email notifications</Label>
</div>

Props

Switch also accepts every Radix Switch.Root prop (checked, defaultChecked, onCheckedChange, disabled, ...).

Changelog

• 19 August 2026 — “You might be looking for” map to Checkbox and Radio Group. Full notes
• 18 August 2026 — Docs page added (was in the library undocumented). Full notes
• 18 August 2026 — Styles live in a CSS module; look unchanged. Full notes