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:

Prop

Type

Default

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