Switch | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
If you are starting a new project, please try gluestack-ui for better performance and new design.
Switch
The Switch provides an alternative to the Checkbox component. It also allows a user to switch between enabled or disabled states.
Examples
Basic
Playgroundconst Example = () => {return <HStack alignItems="center" space={4}><Text>Bluetooth</Text><Switch size="sm" /></HStack>;};
Sizes
Playgroundconst Example = () => {return <VStack space={4} alignItems="center"><Switch size="sm" /><Switch size="md" /><Switch size="lg" /></VStack>;};
Track & Thumb Color
Playgroundconst 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>;};
Color Schemes
Playgroundconst Example = () => {return <VStack space={4} alignItems="center"><Switch defaultIsChecked colorScheme="primary" /><Switch defaultIsChecked colorScheme="secondary" /><Switch defaultIsChecked colorScheme="emerald" /></VStack>;};
Props
Switch implements , , , , , , , , , ,
size
The size (width and height) of the switch.
Type: ThemeComponentSizeType<"Switch">
Default: md
isDisabled
If true, set the disabled to the invalid state.
Type: boolean
isHovered
If true, set the hovered state.
Type: boolean
name
The input name of the Switch when used in a form.
Type: string
onToggle
Function called when the state of the Switch changes.
Type: (...args: any) => void
isChecked
If true, set the Switch to the checked state.
Type: boolean
defaultIsChecked
If true, the checkbox will be initially checked.
Type: boolean
isInvalid
If true, set the switch to the invalid state.
Type: boolean
onTrackColor
The track color of the Switch when on.
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "muted.500" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | "tertiary.900">
offTrackColor
The track color of the Switch when off.
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "muted.500" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | "tertiary.900">
onThumbColor
The thumb color of the Switch when on.
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "muted.500" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | "tertiary.900">
offThumbColor
The thumb color of the Switch when off.
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "muted.500" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | "tertiary.900">
colorScheme
Color scheme to be used for the Switch
Type: ColorSchemeType
_hover
Props when Switch is hovered. Accepts all the Switch props.
Type: Omit<Partial<ISwitchProps>, "_hover">
Accessibility
On mobile, uses native switch which is fully accessible.
On web, it uses checkbox with a set to switch.
Keyboard Interactions
Name
Description
Space
Toggles the component's state.
MadeWithNativeBase
gluestack-ui