This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 58).

Switch

A Jetpack Compose Switch component for toggle controls.

Android

Included in Expo Go

GitHub

npm

Changelog

For cross-platform usage, see the universal Switch — it renders the appropriate native component per platform.

Expo UI Switch matches the official Jetpack Compose Switch API.

Two Material 3 switches showing on and off states

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Toggle switch

ToggleSwitchExample.tsx

import { useState } from 'react';
import { Host, Switch } from '@expo/ui/jetpack-compose';

export default function ToggleSwitchExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch value={checked} onCheckedChange={setChecked} />
    </Host>
  );
}

Custom colors

CustomColorsExample.tsx

import { useState } from 'react';
import { Host, Switch } from '@expo/ui/jetpack-compose';

export default function CustomColorsExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch
        value={checked}
        onCheckedChange={setChecked}
        colors={{
          checkedThumbColor: '#6200EE',
          checkedTrackColor: '#EDE9FE',
          uncheckedThumbColor: '#9CA3AF',
          uncheckedTrackColor: '#F3F4F6',
          uncheckedBorderColor: '#D1D5DB',
        }}
      />
    </Host>
  );
}

Custom thumb content

Use Switch.ThumbContent to render a custom element inside the thumb. Switch.DefaultIconSize gives you the M3 default icon size so your content fits perfectly.

ThumbContentExample.tsx

import { useState } from 'react';
import { Host, Switch, Box } from '@expo/ui/jetpack-compose';
import {
  size,
  clip,
  background,
  Shapes,
} from '@expo/ui/jetpack-compose/modifiers';

export default function ThumbContentExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Switch
        value={checked}
        onCheckedChange={setChecked}
        colors={{
          checkedThumbColor: '#7C3AED',
          checkedTrackColor: '#EDE9FE',
          checkedIconColor: '#7C3AED',
          uncheckedThumbColor: '#9CA3AF',
          uncheckedTrackColor: '#F3F4F6',
          uncheckedBorderColor: '#D1D5DB',
          uncheckedIconColor: '#9CA3AF',
        }}>
        <Switch.ThumbContent>
          <Box
            modifiers={[
              size(Switch.DefaultIconSize, Switch.DefaultIconSize),
              clip(Shapes.Circle),
              background(checked ? '#FFFFFF' : '#E5E7EB'),
            ]}
          />
        </Switch.ThumbContent>
      </Switch>
    </Host>
  );
}

Labeled switch

To make the whole row tappable and have screen readers read the label with the switch, apply the toggleable modifier to the Row. Handle the change in toggleable and do not pass onCheckedChange to the Switch.

Without onCheckedChange, the switch loses its 48 dp minimum touch size. Use defaultMinSize to keep it.

import { useState } from 'react';
import { Host, Row, Switch, Text } from '@expo/ui/jetpack-compose';
import {
  defaultMinSize,
  toggleable,
  weight,
} from '@expo/ui/jetpack-compose/modifiers';

export default function LabeledSwitchExample() {
  const [checked, setChecked] = useState(false);

  return (
    <Host matchContents>
      <Row
        verticalAlignment="center"
        modifiers={[
          toggleable(checked, () => setChecked(!checked), {
            role: 'switch',
          }),
        ]}>
        <Text modifiers={[weight(1)]}>Wi-Fi</Text>
        <Switch
          value={checked}
          modifiers={[
            defaultMinSize({ minWidth: 48, minHeight: 48 }),
          ]}
        />
      </Row>
    </Host>
  );
}

API

import { Switch } from '@expo/ui/jetpack-compose';

Components

`Switch`

Android

Type: React.Element<SwitchProps>

A switch component.

SwitchProps

`children`

Android

Optional • Type: ReactNode

Children containing ThumbContent slot.

`colors`

Android

Optional • Type: SwitchColors

Colors for switch core elements.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the switch is enabled.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onCheckedChange`

Android

Optional • Type: (value: boolean) => void

Callback function that is called when the checked state changes. When omitted, the switch is not interactive on its own, so a parent with the toggleable modifier can handle input and accessibility for it.

`value`

Android

Type: boolean

Indicates whether the switch is checked.

`SwitchThumbContent`

Android

Type: React.Element<ThumbContentProps>

Custom content to be displayed inside the switch thumb.

Types

`SwitchColors`

Android

Colors for switch core elements.

Property	Type	Description
checkedBorderColor(optional)	`ColorValue`	-
checkedIconColor(optional)	`ColorValue`	-
checkedThumbColor(optional)	`ColorValue`	-
checkedTrackColor(optional)	`ColorValue`	-
disabledCheckedBorderColor(optional)	`ColorValue`	-
disabledCheckedIconColor(optional)	`ColorValue`	-
disabledCheckedThumbColor(optional)	`ColorValue`	-
disabledCheckedTrackColor(optional)	`ColorValue`	-
disabledUncheckedBorderColor(optional)	`ColorValue`	-
disabledUncheckedIconColor(optional)	`ColorValue`	-
disabledUncheckedThumbColor(optional)	`ColorValue`	-
disabledUncheckedTrackColor(optional)	`ColorValue`	-
uncheckedBorderColor(optional)	`ColorValue`	-
uncheckedIconColor(optional)	`ColorValue`	-
uncheckedThumbColor(optional)	`ColorValue`	-
uncheckedTrackColor(optional)	`ColorValue`	-