Switch | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
Switch
The Switch provides an alternative to the Checkbox component. It also allows a user to switch between enabled or disabled states.
Show Code
Playground
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 | "full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | "lg" | "1" | "2xl" | "2.5" | "1.5" | "10" | "20" | "64" | ... 27 more ... | "5/6">
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: () => 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<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "text.900" | "muted.200" | "muted.300" | "muted.500" | "text.50" | "text.600" | "muted.700" | "muted.600" | ... 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" | "text.900" | "muted.200" | "muted.300" | "muted.500" | "text.50" | "text.600" | "muted.700" | "muted.600" | ... 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" | "text.900" | "muted.200" | "muted.300" | "muted.500" | "text.50" | "text.600" | "muted.700" | "muted.600" | ... 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" | "text.900" | "muted.200" | "muted.300" | "muted.500" | "text.50" | "text.600" | "muted.700" | "muted.600" | ... 342 more ... | "tertiary.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<InterfaceSwitchProps, "_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