Toggle

A switch for toggling a boolean setting. Uses <input type="checkbox" role="switch"> — styled as a pill by @primus/ui-core.

Preview · Toggle

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:280px">
  <label><input type="checkbox" role="switch" /> Enable notifications</label>
  <label><input type="checkbox" role="switch" checked /> Dark mode</label>
  <label><input type="checkbox" role="switch" disabled /> Read-only setting</label>
</div>

React

import { PrimusToggle } from 'primus-react-ui';

<PrimusToggle label="Enable notifications" />
<PrimusToggle label="Dark mode" checked />
<PrimusToggle label="Read-only" disabled />
<PrimusToggle label="Enable alerts" checked={alertsOn}
  onChange={(checked) => setAlertsOn(checked)} />

Angular

<primus-toggle label="Enable notifications"></primus-toggle>
<primus-toggle label="Dark mode" [checked]="true"></primus-toggle>
<primus-toggle label="Read-only" [disabled]="true"></primus-toggle>
<primus-toggle label="Enable alerts" [checked]="alertsEnabled"
  (checkedChange)="alertsEnabled = $event">
</primus-toggle>

Props

Prop	Type	Default	Description
label	string	''	Label text
checked	boolean	false	Checked state
disabled	boolean	false	Disabled
size	sm | md | lg	md	Size

Accessibility

• Uses <input type="checkbox" role="switch"> — screen readers announce "On" / "Off"
• Keyboard: Space to toggle
• Always provide a visible <label> — do not rely on position alone
• Use aria-label on icon-only toggles

Version history

See the Changelog for version history and breaking changes.