---
title: Switch
description: A toggle that turns a single setting on or off right away, like enabling a feature, with a sliding thumb that shows its current state.
icon: toggle-left
author:
  name: shadcn
  url: https://github.com/shadcn
search:
  keywords: [toggle switch]
related:
  - /checkbox
  - /toggle
mode: wide
---

<PoweredBy
  packages={[
    { name: 'Base UI', url: 'https://base-ui.com/react/components/switch' },
    { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/switch' },
  ]}
/>

### Installation

```package-install
npx shadcn@latest add @redpanda/switch
```

<ComponentPreview name="switch-demo" description="Default switch paired with a label." />

### Disabled

<ComponentPreview name="switch-disabled-demo" description="Non-interactive switches for both the off and on states." />

## When to use

Switches provide binary toggle controls. Use this decision tree:

```mermaid
graph TD;
    A[❓ Binary choice needed?] --> B{Immediate effect?};
    A --> C[⚠️ Use other input types];
    B --> D[✅ Use Switch];
    B --> E{Form submission required?};
    D --> F{Switch context?};
    E --> G[⚠️ Use Checkbox];
    F --> H[✅ Settings Switch];
    F --> I[✅ Feature Toggle];
    F --> J[✅ Status Switch];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class D,H,I,J recommended;
    class C,G discouraged;
    class A,B,E,F decision;
```

## Usage

```tsx
<Switch />
```

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://base-ui.com/react/components/switch" text="Docs" />
  <ExternalLink href="https://base-ui.com/react/components/switch#api-reference" text="API Reference" />
</div>

### Examples

### Default

<ComponentPreview name="switch-demo" />

### Advanced Label

<ComponentPreview
  name="switch-advanced-label-demo"
  description="A switch component that causes other changes based on its state."
/>

### Card style

<ComponentPreview
  name="switch-card-style-demo"
  description="Switch wrapped in a settings-row card layout with title and description."
/>

### Settings panel

<ComponentPreview
  name="switch-settings-panel-demo"
  description="Settings panel composing multiple switches with headings and descriptions."
/>

### Form

<ComponentPreview name="switch-form-demo" description="A switch component used in a form." />

## Keyboard interactions

| Key                 | Action                                                                                         |
| ------------------- | ---------------------------------------------------------------------------------------------- |
| `Tab` to the switch | Focus lands on the switch.                                                                     |
| `Space`             | Toggles checked state.                                                                         |
| `Enter`             | Submits the surrounding form — does not toggle the switch (Space is the dedicated toggle key). |

## Accessibility

- Base UI renders the switch as a real `<button role="switch">` with `aria-checked`. It also sets the Radix-compat
  `data-state="checked" | "unchecked"` attribute so existing selectors keep working.
- Always pair with a visible `<Label htmlFor>` — switches without labels are ambiguous ("on for what?").
- Use a switch for **immediate-effect** binary settings (notifications on/off, theme toggle). For binary form values
  submitted alongside other fields prefer a `Checkbox` — its ARIA semantics are better understood by assistive tech.
- `onCheckedChange` is the Radix-style single-argument `(checked: boolean) => void`.

## Credits

- We use [Base UI](https://base-ui.com/react/components/switch) for the switch component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/switch) for the switch style.