C
Storybook
07Shipped

Switch

Boolean toggle for immediate-effect settings.

Import

import { Switch } from "@charply/design"

Variants

In a settings row

LinkedIn Assist Mode

Queue drafts for review.

States

Guidelines

docs/design/components/switch.md

Do

  • ✓Provide `aria-label` when the switch has no paired visible label element.
  • ✓Use for settings that take effect immediately (no save needed).

Don't

  • ✗Use a switch when the action needs confirmation before taking effect — use a checkbox + save button.
  • ✗Use for form submissions — switches are for instant settings.
  • ✗---

See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.