---
title: Switch
airtableId: reccfLvVzECvskVmu
---
import { BasicExample, ControlledExample, LabelPositionExample, StatesExample,WithPadding,SwitchSizes } from "./switch";

The Switch component is a toggle that allows users to turn a setting on or off. It's built on top of Radix UI's Switch primitive and includes support for labels, tooltips, and various size options.

## Installation

```ts
import { Switch } from "@calcom/ui";
```

## Examples

### Basic Switch

A simple switch with and without a label.

<BasicExample />

### Switch sizes

A switch can be sized either small or 'base'.

<SwitchSizes />


### Label Position

The label can be positioned either before or after the switch.

<LabelPositionExample />

### States

Switches can be enabled, disabled, or disabled in a checked state.

<StatesExample />


### Controlled Switch

Use state to control the switch's checked state.

<ControlledExample />

### With Padding

Use the padding prop to add padding to the switch.

<WithPadding />