wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Compiler

Intro
Install
Benchmarks

Core

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

Tamagui

Stacks
Headings
Paragraph

Forms

Button
Text Inputs
Label
Progress
Select
Slider
Switch

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip

Content

Avatar
Card
Group
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Feather Icons

Guides

Design Systems
Developing
Next.js
Expo
Vite
create-tamagui-app

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.

Usage

 
import { Switch } from 'tamagui'



export default () => (

  <Switch size="$4">

    <Switch.Thumb animation="bouncy" />

  </Switch>

)

Switch props

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

    • Previous

    Slider

    Next

    AlertDialog

    Edit this page on GitHub.