> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Switch

> Learn how to use Switch with Uniwind className props

## Overview

The `Switch` component renders a boolean input toggle. Switch does **not** support `className` — use only the color-specific className props below.

## Styling Convention

<Info>
  Switch uses the `accent-` prefix for all its className props (e.g., `thumbColorClassName="accent-blue-500"`).
</Info>

<Warning>
  **Since 1.6.2:** Passing a className without the `accent-` prefix to a color prop will log a warning to the development console.
</Warning>

## Uniwind Bindings

<ParamField path="thumbColorClassName" type="string">
  Maps to the `thumbColor` prop. Requires `accent-` prefix for color values.
</ParamField>

<ParamField path="trackColorOnClassName" type="string">
  Maps to the `trackColor.true` prop (when switch is on). Requires `accent-` prefix for color values.
</ParamField>

<ParamField path="trackColorOffClassName" type="string">
  Maps to the `trackColor.false` prop (when switch is off). Requires `accent-` prefix for color values.
</ParamField>

<ParamField path="ios_backgroundColorClassName" type="string">
  Maps to the `ios_backgroundColor` prop. Requires `accent-` prefix for color values.
</ParamField>

## Usage Example

```tsx theme={null}
import { Switch, View } from 'react-native'

<View className="p-4">
  <Switch
    value={isEnabled}
    onValueChange={setIsEnabled}
    thumbColorClassName="accent-white"
    trackColorOnClassName="accent-blue-500 dark:accent-blue-400"
    trackColorOffClassName="accent-gray-300 dark:accent-gray-700"
    ios_backgroundColorClassName="accent-gray-300"
  />
</View>
```