wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Core

Configuration
Stack & Text
styled
Variants
Props
Themes
Animations
Theme
useMedia
useTheme
FontLanguage
Extras

Compiler

About
Install
Benchmarks

Theme

Colors
Tokens

Tamagui

Stacks
Headings
Text

Forms

Button
Checkbox
Form
Input & TextArea
Label
Progress
RadioGroup
Select
Slider
Switch
ToggleGroup

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip
Toast

Organize

Group
Tabs

Content

Avatar
Card
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems
How to Build a Button
Developing
Next.js
Expo
Vite
create-tamagui

Community

Community
Blog
GitHub
Twitter
Discord

Switch

Use in forms to toggle between two states.

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

Usage

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



export default () => (

  <Switch size="$4">

    <Switch.Thumb animation="bouncy" />

  </Switch>

)

API Reference

Switch

Switchs extend Stack views inheriting all the Tamagui standard props, plus:

Props

  • labeledBy

    string

    Set aria-labeled-by.

  • name

    string

    Equivalent to input name.

  • value

    string

    Give it a value (for use in HTML forms).

  • checked

    boolean

    Control the input.

  • defaultChecked

    boolean

    Uncontrolled default value.

  • required

    boolean

    Sets aria-required.

  • onCheckedChange

    (checked: boolean) => void

  • unstyled

    boolean

    Default: 

    false

    When true, remove all default tamagui styling.

  • native

    NativeValue<"mobile" | "ios" | "android">

    Render to a native switch. (Not supported on web)

  • nativeProps

    SwitchProps (from `react-native`)

    Props to pass to the native Switch;

    • Switch.Thumb

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

    Props

  • unstyled

    boolean

    Default: 

    false

    When true, remove all default tamagui styling.

    • Previous

    Slider

    Next

    ToggleGroup

    Edit this page on GitHub.