---
title: Switch
description: A control that allows the user to toggle between checked and not checked.
links:
  source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/src/components/Switch/Switch.tsx
  radix: https://www.radix-ui.com/primitives/docs/components/switch
---

<PreviewComponent name="switch/preview" />

### Usage

```tsx
import { Switch } from "@lemonsqueezy/wedges";
```

```tsx showLineNumbers
<Switch label="Label" />
```

### API Reference

Extends the <a href="https://www.radix-ui.com/primitives/docs/components/switch" rel="nofollow noreferrer" target="_blank">Radix Switch</a> primitive and includes all of its props.

<PropsTable
  content={[
    [
      {
        value: "disabled",
        description:
          "When `true`, additional styles will be applied to indicate that the switch is disabled.",
      },
      {
        value: "boolean",
      },
      { value: "false" },
    ],
    [
      {
        value: "required",
        description:
          "If set to `true`, additional styles will be applied to indicate that the switch is required.",
      },
      { value: "boolean" },
      { value: "false" },
    ],
    [
      {
        value: "name",
        description:
          "The name of the switch. Submitted with its owning form as part of a name/value pair.",
      },
      { value: "string" },
      {},
    ],
    [
      {
        value: "value",
        description: "The value given as data when submitted with a `name`.",
      },
      { value: "string" },
      { value: '"on"' },
    ],
    [
      {
        value: "tooltip",
        description: "Optional description of the label, shown on hover.",
      },
      { value: "ReactNode" },
      {},
    ],
    [
      { value: "description", description: "Additional information displayed next to the label." },
      { value: "ReactNode" },
      {},
    ],
    [
      {
        value: "label",
        description: "Label of the checkbox.",
      },
      { value: "ReactNode" },
      {},
    ],
    [
      {
        value: "alignLabel",
      },
      { value: '"start" | "end"' },
      { value: '"end"' },
    ],
    [
      {
        value: "onCheckedChange",
        description: "Event handler called when the state of the switch changes.",
      },
      { value: "function", description: "(checked: boolean) => void" },
      {},
    ],
    [
      {
        value: "checked",
        description:
          "The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.",
      },
      { value: "boolean" },
      {},
    ],
    [
      {
        value: "defaultChecked",
        description:
          "The state of the switch when it is initially rendered. Use when you do not need to control its state.",
      },
      { value: "boolean" },
      {},
    ],
    [
      {
        value: "asChild",
        description:
          "Change the default rendered element for the one passed as a child, merging their props and behavior.",
      },
      { value: "boolean" },
      { value: "false" },
    ],
  ]}
/>

<PropsTable
  isData
  content={[
    [
      {
        value: "[data-state]",
      },
      { value: '"checked" | "unchecked"' },
      {},
    ],
    [
      {
        value: "[data-disabled]",
      },
      { value: "Present when disabled" },
      {},
    ],
  ]}
/>

### Accessibility

The `Switch` component supports all accessibility features of the <a href="https://www.radix-ui.com/primitives/docs/components/switch#accessibility" target="_blank" rel="nofollow noreferrer">Radix Switch</a> primitive.

### Examples

<PreviewComponent name="switch/example-1" />