A toggle switch alternative to the checkbox.
<Flex>
<Text size="2">
<label>
<Switch mr="2" defaultChecked /> Sync settings{' '}
<Text color="gray">(Default)</Text>
</label>
</Text>
</Flex>
This component inherits props from the Radix Switch primitive and supports common margin props.
Use the size prop to control the size.
<Flex align="center" gap="2">
<Switch size="3" defaultChecked />
<Switch size="2" defaultChecked />
<Switch size="1" defaultChecked />
</Flex>
Use the variant prop to control the visual style.
<Flex gap="2">
<Flex direction="column" gap="2">
<Switch variant="surface" defaultChecked />
<Switch variant="classic" defaultChecked />
<Switch variant="soft" defaultChecked />
</Flex>
<Flex direction="column" gap="2">
<Switch variant="surface" />
<Switch variant="classic" />
<Switch variant="soft" />
</Flex>
</Flex>
Use the color prop to assign a specific color, ignoring the global theme.
<Flex gap="2">
<Switch color="indigo" defaultChecked />
<Switch color="cyan" defaultChecked />
<Switch color="orange" defaultChecked />
<Switch color="crimson" defaultChecked />
</Flex>
Use the highContrast prop to add additional contrast.
<Flex gap="2">
<Switch defaultChecked />
<Switch defaultChecked highContrast />
</Flex>
Use the radius prop to assign a specific radius value, ignoring the global theme.
<Flex gap="3">
<Switch radius="none" defaultChecked />
<Switch radius="large" defaultChecked />
<Switch radius="full" defaultChecked />
</Flex>