build69
build69  /  Components  /  Selection & Choice  /  Switch

Switch

v1.0.7Updated 27 Aug 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