CleenUI · Forms · Switch

Switch

On/off toggle with label, sizing, and the same controlled-form integration as Checkbox.

storybook.cleenui.com · forms-switch--default
Open in new window

About Switch

Switch is functionally identical to Checkbox but visually communicates an immediate state change rather than a deferred form submission. Use Switch for settings that apply instantly (notifications on/off, feature flags); use Checkbox for selections that apply on submit.

The animated thumb has reduced-motion variants and respects user OS preferences. Loading state (small spinner inside the thumb) shows when the toggle is awaiting server confirmation.

When to use it

  • Settings toggles that apply immediately.
  • Feature flag UIs in admin panels.
  • Notification preference rows.
  • Show/hide toggles in dashboard layouts.

Common props

Prop
Type
Description
checked
boolean
Controlled checked state.
loading
boolean
Show in-thumb spinner while awaiting confirmation.
size
"sm" | "md" | "lg"
Visual size variant.
label
ReactNode
Label content beside the switch.
onChange
(checked: boolean) => void
Change handler.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2

Used in templates

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.