Switch

<Tabs.Content value="styled">

</Tabs.Content> <Tabs.Content value="unstyled">

</Tabs.Content> <Tabs.Content value="headless">

</Tabs.Content>

<Highlights features={[ Accessible, easy to compose and customize., Style and animate both frame and thumb., Sizable & works controlled or uncontrolled., Native prop that renders native Switch on mobile, ]} />

Installation

<Tabs.Content value="styled">

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

npm install @tamagui/switch

</Tabs.Content>

<Tabs.Content value="unstyled">

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

npm install @tamagui/switch

</Tabs.Content>

<Tabs.Content value="headless">

To use the headless switch, you want to import it from the @tamagui/switch-headless package. This package has no dependency on @tamagui/core, but still works off the react-native APIs. This means you can bring your own style library.

npm install @tamagui/switch-headless

</Tabs.Content>

Usage

<Tabs.Content value="styled">

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

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

</Tabs.Content>

<Tabs.Content value="unstyled">

Using the createSwitch export, you can create an unstyled switch without using any of the default styles. This is similar to the unstyled prop, 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.

</Tabs.Content>

<Tabs.Content value="headless">

The useSwitch hook provides all the state and accessibility props needed to build a custom switch with any styling solution.

Basic Usage

import { useSwitch } from '@tamagui/switch-headless'
import { useState } from 'react'
import { Pressable, View } from 'react-native'

function MySwitch({ defaultChecked, onCheckedChange, ...props }) {
  const [checked, setChecked] = useState(defaultChecked || false)

  const { switchProps, switchRef, bubbleInput } = useSwitch(
    props,
    [checked, setChecked],
    null
  )

  return (
    <>
      <Pressable
        ref={switchRef}
        {...switchProps}
        style={{
          width: 50,
          height: 28,
          borderRadius: 14,
          backgroundColor: checked ? '#22c55e' : '#d1d5db',
          padding: 2,
        }}
      >
        <View
          style={{
            width: 24,
            height: 24,
            borderRadius: 12,
            backgroundColor: 'white',
            transform: [{ translateX: checked ? 22 : 0 }],
          }}
        />
      </Pressable>
      {bubbleInput}
    </>
  )
}

</Tabs.Content>

API Reference

Switch

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

<PropsTable data={[ { name: 'labeledBy', type: 'string', description: Set aria-labeled-by., }, { name: 'name', type: 'string', description: Equivalent to input name., }, { name: 'value', type: 'string', description: Give it a value (for use in HTML forms)., }, { name: 'checked', type: 'boolean', description: Control the input., }, { name: 'defaultChecked', type: 'boolean', description: Uncontrolled default value., }, { name: 'required', type: 'boolean', description: Sets aria-required., }, { name: 'onCheckedChange', type: '(checked: boolean) => void', description: Callback called when checked state changes., }, { name: 'unstyled', type: 'boolean', default: 'false', description: When true, removes all default Tamagui styling., }, { name: 'native', type: 'NativeValue<"mobile" | "ios" | "android">', description: Render to a native switch. (Not supported on web), }, { name: 'nativeProps', type: 'SwitchProps (from react-native)', description: Props to pass to the native Switch., }, { name: 'activeStyle', type: 'ViewStyle', description: Styles to apply when the switch is checked/active., }, { name: 'activeTheme', type: 'string | null', description: Theme to apply when the switch is checked/active., }, ]} />

Switch.Thumb

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

<PropsTable data={[ { name: 'unstyled', type: 'boolean', default: 'false', description: When true, removes all default Tamagui styling., }, { name: 'activeStyle', type: 'ViewStyle', description: Styles to apply to the thumb when the switch is checked/active., }, ]} />

<Tabs.Content value="headless">

useSwitch

The useSwitch hook accepts three arguments:

const { switchProps, switchRef, bubbleInput } = useSwitch(
  props, // SwitchProps
  state, // [checked: boolean, setChecked: (checked: boolean) => void]
  ref // React.Ref
)

Props (first argument)

<PropsTable data={[ { name: 'labeledBy', type: 'string', description: Set aria-labelledby for accessibility., }, { name: 'disabled', type: 'boolean', description: Whether the switch is disabled., }, { name: 'name', type: 'string', description: Form input name for the hidden input., }, { name: 'value', type: 'string', description: Form input value., }, { name: 'required', type: 'boolean', description: Whether the switch is required in a form., }, { name: 'onPress', type: '(event) => void', description: Called when switch is pressed (composed with internal handler)., }, ]} />

State (second argument)

A tuple of [checked, setChecked] where:

• checked: Current boolean state
• setChecked: React state setter function

Return Value

</Tabs.Content>