Switch | NativeBase | Universal Components for React and React Native

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: 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" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "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" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "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" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "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" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "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.
Nativebase logo
MadeWithNativeBase