Switch | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Resources
Data Display
Typography
Disclosure
Media and Icons
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Switch
The Switch component is an alternative to the Checkbox component. You can switch between enabled or disabled states.
Examples
Basic
Playground
Sizes
Playground
Track & Thumb Color
Playground
Color Schemes
Playground
Props
size
The size (width and height) of the switch.
Type: ResponsiveValue<number | "px" | "0" | (string & {}) | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "container" | ... 30 more ... | "5/6">
Default: md
isDisabled
If true, set the disabled to the invalid 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: () => any
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<(string & {}) | "gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "coolGray.50" | "coolGray.100" | "coolGray.200" | ... 233 more ... | "dark.900">
offTrackColor
The track color of the Switch when off.
Type: ResponsiveValue<(string & {}) | "gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "coolGray.50" | "coolGray.100" | "coolGray.200" | ... 233 more ... | "dark.900">
onThumbColor
The thumb color of the Switch when on.
Type: ResponsiveValue<(string & {}) | "gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "coolGray.50" | "coolGray.100" | "coolGray.200" | ... 233 more ... | "dark.900">
offThumbColor
The thumb color of the Switch when off.
Type: ResponsiveValue<(string & {}) | "gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "coolGray.50" | "coolGray.100" | "coolGray.200" | ... 233 more ... | "dark.900">
colorScheme
Color scheme to be used for the Switch
Type: string
_hover
Props when Switch is hovered. Accepts all the Switch props.
Type: Omit<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.
Nativebase logo
MadeWithNativeBase