---
title: Switch
description: A control that indicates whether a setting is on or off.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="base-switch-demo" />

## Installation

<ComponentInstallation name="base-switch" />

## 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>

### Animate UI Props

#### Switch

<TypeTable
  type={{
    motionProps: {
      description: 'The props to pass to the motion component.',
      type: "HTMLMotionProps<'button'>",
      required: false,
    },
    leftIcon: {
      description: 'The icon to display on the left of the switch',
      type: 'React.ReactNode',
      required: false,
    },
    rightIcon: {
      description: 'The icon to display on the right of the switch',
      type: 'React.ReactNode',
      required: false,
    },
    thumbIcon: {
      description: 'The icon to display on the thumb of the switch',
      type: 'React.ReactNode',
      required: false,
    },
  }}
/>

## 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.