Displays an on/off switch control.
<Switch />
This component inherits props from the Radix Switch component and supports common margin props m, mx, my, ml, mr, mt, mb. View source
m
mx
my
ml
mr
mt
mb
Use the checked and onCheckedChange props to control the value of the switch.
checked
onCheckedChange
import * as React from 'react'; () => { const [checked, onCheckedChange] = React.useState(true); return <Switch checked={checked} onCheckedChange={onCheckedChange} />; };
Use the native disabled attribute to create a disabled switch.
disabled
<Flex direction="column" gap="4"> <Switch disabled /> <Switch disabled defaultChecked={true} /> </Flex>