The Switch provides an alternative to the Checkbox component. It also allows a user to switch between enabled or disabled states.
const Example = () => {
return <Switch size="lg" />;
};
const Example = () => {
return <HStack alignItems="center" space={4}>
<Text>Bluetooth</Text>
<Switch size="sm" />
</HStack>;
};
const Example = () => {
return <VStack space={4} alignItems="center">
<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />
</VStack>;
};
const Example = () => {
return <VStack space={4} alignItems="center">
<Switch />
<Switch offTrackColor="orange.100" onTrackColor="orange.200" onThumbColor="orange.500" offThumbColor="orange.50" />
<Switch offTrackColor="indigo.100" onTrackColor="indigo.200" onThumbColor="indigo.500" offThumbColor="indigo.50" />
</VStack>;
};
const Example = () => {
return <VStack space={4} alignItems="center">
<Switch defaultIsChecked colorScheme="primary" />
<Switch defaultIsChecked colorScheme="secondary" />
<Switch defaultIsChecked colorScheme="emerald" />
</VStack>;
};
Switch implements
,
,
,
,
,
,
,
,
,
On mobile, uses native switch which is fully accessible.
On web, it uses checkbox with a
set to
switch.
Toggles the component's state.