Switch

Use in forms to toggle between two states.

Dark mode

Features

Accessible, easy to compose and customize.

Style and animate both frame and thumb.

Sizable & works controlled or uncontrolled.

import { Switch } from 'tamagui'

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

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

string

Set aria-labeled-by.

string

Equivalent to input name.

string

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

boolean

Control the input.

boolean

Uncontrolled default value.

boolean

Sets aria-required.

(checked: boolean) => void