form · Normal DOM only

Switch

On / off toggle with sliding thumb. Use for settings where the change takes effect immediately.

A Switch represents a setting that flips on or off and applies right away (notifications on, dark mode on). For values that wait until a "Save" press use Checkbox.

Inside a Twenty front-component, prefer the bridge import
This Switch is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Toggle } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Twenty's name for what we call Switch.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Switch } from '@8maverik8/twenty-design';

Examples

States

tsx
<Switch id="a" defaultChecked />
<Switch id="b" />
<Switch id="c" disabled defaultChecked />
<Switch id="d" size="sm" defaultChecked />

Variants

size
sm24 × 16 — dense settings rows.
mddefault32 × 20 — default size in cards and modals.

Guidelines

✓
Phrase the label as a state the user is enabling."Email notifications" — the switch tells the user the value; the label tells them what it controls.
✕
Use a Switch for a binary choice in a form that has a Save button.Use Checkbox instead — Switch implies an instant side effect.
✕
Replace a "Submit" button with a Switch.A Switch is not an action — it persists state.