code/tamagui.dev/data/docs/components/switch/1.28.0.mdx
<Description>Use in forms to toggle between two states.</Description>
<HeroContainer showAnimationDriverControl> <SwitchDemo /> </HeroContainer><Highlights
features={[
Accessible, easy to compose and customize.,
Style and animate both frame and thumb.,
Sizable & works controlled or uncontrolled.,
Native prop that renders native Switch on mobile,
]}
/>
Switch is already installed in tamagui, or you can install it independently:
npm install @tamagui/switch
import { Switch } from 'tamagui' // or '@tamagui/switch'
export default () => (
<Switch size="$4">
<Switch.Thumb animation="bouncy" />
</Switch>
)
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.,
},
{
name: 'native',
type: 'NativeValue<"mobile" | "ios" | "android">',
description: Render to a native switch. (Not supported on web),
},
{
name: 'nativeProps',
type: 'SwitchProps (from react-native)',
description: Props to pass to the native Switch;,
},
]}
/>
Switch.Thumb extends Stack views inheriting all the Tamagui standard props, plus:
<PropsTable
data={[
{
name: 'unstyled',
type: 'boolean',
default: 'false',
description: When true, remove all default tamagui styling.,
},
]}
/>