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

# Switch

## Overview

`Switch` is a React Native component designed for creating a switch or toggle control. It's built on
top of React Native's [Switch](https://reactnative.dev/docs/switch). It can be customized with Tailwind
classes through the `className` prop.

## Preview

<Tabs>
  <Tab title="Preview">
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <div style={{ marginRight: '40px' }}>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/switch-light.png" />

        <p>Light mode</p>
      </div>

      <div style={{ marginRight: '40px' }}>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/switch-dark.png" />

        <p>Dark mode</p>
      </div>
    </div>
  </Tab>

  <Tab title="Code">
    ```jsx theme={null}
    import { Switch } from './components/Switch';

    function SwitchDemo() {
      const [isEnabled, setIsEnabled] = useState(false);

      return <Switch onValueChange={setIsEnabled} value={isEnabled} />
    }

    ```
  </Tab>
</Tabs>

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx nativecn-ui add Switch
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="First Step">
        Include [Switch.tsx](https://github.com/Mobilecn-UI/nativecn-ui/blob/main/components/Switch.tsx) in your project.
      </Step>

      <Step title="Second Step">
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Properties

* `className?: string (optional)` - The classes for the switch.
* See React Native's [Switch props](https://reactnative.dev/docs/switch#props)

## Usage

### Basic Usage

Here's how you can use the `Switch` component:

```jsx theme={null}
const [isEnabled, setIsEnabled] = useState(false);

return <Switch onValueChange={setIsEnabled} value={isEnabled} />;
```