build69
build69  /  Components  /  Selection & Choice  /  Switch

Switch

v1.0.14Updated 19 Oct 2026

On/off toggle (Radix). Use for immediate boolean settings (no save button). Adds inline / stacked / card layouts, label + description slots, a loading spinner, and an optional confirm gate before applying the change.

Preview

Live · 15 stories
DefaultOpen ↗
▸Why this is recommendedformtoggleswitchboolean+3

The default, out-of-the-box Switch.

Recommended for+14
  • ✓Settings toggles
  • ✓Feature flags in UI
  • ✓Notification opt-ins
  • ✓Immediate settings toggles
  • ✓Notification opt-ins with confirm
Tags+6
formtoggleswitchbooleanconfirmloadingdefault
Features+4
  • Animated thumb
  • Disabled state
  • Keyboard accessible
  • Inline / stacked / card layouts
  • Label + description slots
  • Loading state during async toggle
  • Confirm gate before applying change
Not recommended for−2
  • ✕Form fields needing save (use Checkbox)
  • ✕Many options (use RadioGroup)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Switch" })

Usage

import { Switch } from '@/components/inputs/switch';

<Switch layout="stacked" label="Two-factor auth" description="Require a code on every login." />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
checked

On state

boolean—
onCheckedChange

State change callback

function—
layout

Visual layout

'inline' | 'stacked' | 'card'—
loading

Show loading spinner

boolean—
confirm

Confirm gate

string | SwitchConfirm—
label

Switch label

ReactNode—
description

Supporting description

ReactNode—

Related