---
title: Switch
description: Switches allow users to toggle between two states.
category: Forms
related: [Checkbox, RadioGroup, Label, Container]
commonPatterns: [settings-toggle, feature-toggle, form-toggle]
---

Source: https://clickhouse.design/click-ui/switch

# Switch

Switches allow users to toggle between two states. They are commonly used for settings, feature flags, and binary options.

## Example

| Prop            | Type                         | Default value | Description                                                                             |
| --------------- | ---------------------------- | ------------- | --------------------------------------------------------------------------------------- |
| label           | `ReactNode`                  | `""`          | Label text or content displayed next to the switch                                      |
| orientation     | `"vertical" \| "horizontal"` | `"vertical"`  | Layout orientation - whether switch and label are arranged vertically or horizontally   |
| dir             | `"start" \| "end"`           | `"start"`     | Direction/position of the label relative to the switch (start = before, end = after)    |
| checked         | `boolean`                    | `false`       | Whether the switch is in the checked/on state                                           |
| disabled        | `boolean`                    | `false`       | Whether the switch is disabled and cannot be toggled                                    |
| onCheckedChange | `(checked: boolean) => void` | `undefined`   | Callback function called when the switch state changes. Receives the new checked state. |

```tsx
import { Switch } from '@clickhouse/click-ui'
import { useState } from 'react'

function MySwitch() {
const [checked, setChecked] = useState(false)
return (
  <Switch 
    id="example"
    label="Basic Switch"
    checked={checked}
    onCheckedChange={setChecked}
  />
)
}
```

## Quick start

```tsx
import { Switch } from '@clickhouse/click-ui'
import { useState } from 'react'

function MySwitch() {
const [checked, setChecked] = useState(false)
return (
  <Switch 
    id="example"
    label="Enable notifications"
    checked={checked}
    onCheckedChange={setChecked}
  />
)
}
```

## Related components

- **Checkbox**: For selecting one or more items from a list.
- **RadioGroup**: For single selection from multiple options.
- **Label**: Provides accessible labels for switches.
- **Container**: For organizing multiple switches in layouts.

## Common use cases

### Settings toggle

```tsx
import { Switch, Container } from '@clickhouse/click-ui'
import { useState } from 'react'

function SettingsToggles() {
const [notifications, setNotifications] = useState(true)
return (
  <Container orientation='vertical' gap='sm'>
    <Switch
      id="notifications"
      label="Enable notifications"
      checked={notifications}
      onCheckedChange={setNotifications}
    />
  </Container>
)
}
```

### Feature toggle

```tsx
import { Switch } from '@clickhouse/click-ui'
import { useState } from 'react'

function FeatureToggle() {
const [feature, setFeature] = useState(false)
return (
  <Switch
    id="feature"
    label="Enable new feature"
    checked={feature}
    onCheckedChange={setFeature}
  />
)
}
```

## States

**Checked**

**Unchecked**

**Disabled Checked**

**Disabled Unchecked**

## Layout

**Vertical**

**Horizontal**