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