Switch

<Description>Use in forms to toggle between two states.</Description>

<Highlights 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:

<PropsTable data={[ { name: 'labeledBy', type: 'string', description: Set aria-labeled-by., }, { name: 'name', type: 'string', description: Equivalent to input name., }, { name: 'value', type: 'string', description: Give it a value (for use in HTML forms)., }, { name: 'checked', type: 'boolean', description: Control the input., }, { name: 'defaultChecked', type: 'boolean', description: Uncontrolled default value., }, { name: 'required', type: 'boolean', description: Sets aria-required., }, { name: 'onCheckedChange', type: '(checked: boolean) => void', }, { name: 'unstyled', type: 'boolean', default: 'false', description: When true, remove all default tamagui styling., }, ]} />