Switch

Use in forms to toggle between two states.

Installation

Switch is already installed in tamagui, or you can install it independently:

npm install @tamagui/switch

Usage

import { Switch } from 'tamagui' // or '@tamagui/switch'

export default () => (
  <Switch size="$4">
    <Switch.Thumb animation="bouncy" />
  </Switch>
)

Headless with createSwitch

Using the createSwitch export, you can create a fully custom switch without using any of the default styles. This is similar to unstyled, but it doesn't assume the props size or unstyled exist, and it won't automatically apply the active theme.

You must pass SwitchContext as the context option to your Frame and Thumb styled components.

If you define a checked variant, it will apply those styles.

Here's an example:

import { Stack, styled } from '@tamagui/core'
import { createSwitch, SwitchContext } from '@tamagui/switch'

const Frame = styled(Stack, {
  context: SwitchContext,

  variants: {
    checked: {
      true: {
        backgroundColor: 'yellow'
      },
      false: {
        backgroundColor: 'green',
      },
    },
  } as const,
})

const Thumb = styled(Stack, {
  context: SwitchContext,

  variants: {
    checked: {
      true: {
        opacity: 1,
      },
      false: {
        opacity: 0.5,
      },
    },
  } as const,
})

export const Switch = createSwitch({
  Frame,
  Thumb,
})

API Reference

Switch extends Stack views inheriting all the Tamagui standard props, plus:

Switch.Thumb extends Stack views inheriting all the Tamagui standard props, plus: