---
title: Switch | UI
description: The Switch provides an alternative to the Checkbox component. It also allows a user to switch between enabled or disabled states.
pageTitle: Switch
pageDescription: The Switch provides an alternative to the Checkbox component. It also allows a user to switch between enabled or disabled states.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Forms/Switch" />

import { Switch, VStack } from './Switch';
import { transformedCode } from '../../../utils';
import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

import { styled } from '@dank-style/react';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Switch` component to your project.

```jsx
npx install @gluestack-ui add switch
```

## Import

```jsx
// import the component from your component folder
import { Switch } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
function Example(){
  const [isEnabled, setIsEnabled] = React.useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <Switch
      onValueChange={toggleSwitch}
      value={isEnabled}
    />
  );
}
`,
      scope: {
        Wrapper,
        Switch,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The Switch component consists of the following parts:

```jsx
export default () => <Switch />;
```

## API Reference

### Switch

Contains all switch related layout style props and actions.
It inherits all the properties of React Native's [Switch](https://reactnative.dev/docs/switch#props) component.

## Dependencies

- `@gluestack-ui/utils`
- `@react-native-aria/focus`

<br />
<br />

## Examples

### Sizes

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<VStack space="md">
  <Switch size="sm" />
  <Switch size="lg" />
</VStack>
`,
      transformCode: (code) => {
        return `function Example(){
  const [isEnabled1, setIsEnabled1] = React.useState(false);
  const [isEnabled2, setIsEnabled2] = React.useState(false);
  const toggleSwitch1 = () => setIsEnabled1(previousState => !previousState);
  const toggleSwitch2 = () => setIsEnabled2(previousState => !previousState);
  return (
<VStack space="md">
    <Switch
      onValueChange={toggleSwitch1}
      value={isEnabled1}
      size="sm" 
    />
    <Switch
      onValueChange={toggleSwitch2}
      value={isEnabled2}
      size="lg" 
    />
</VStack>
  );
}`;
      },
      scope: {
        Wrapper,
        Switch,
        VStack,
      },
      argsType: {},
    }}
  />
</AppProvider>

# Advanced

## Customizing the Switch

We have a function called `createSwitch` which can be used to create a custom switch component. This function takes in a configuration object which contains the styled components that you want to use for the switch. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root } from '../components/core/switch/styled-components';

// import the createSwitch function
import { createSwitch } from '@gluestack-ui/switch';

// Understanding the API
const Switch = createSwitch({
  Root,
});

// Using the switch component
export default () => <Switch />;
```

Default styling of all these components can be found in the `components/core/switch` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/components/Switch/index.tsx) of the styled `Switch` components.