Switch | NativeBase | Universal Components for React and React Native

Search
K
Hire us
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: "lg" | "md" | "sm"
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: string
offTrackColor
The track color of the Switch when off.
Type: string
onThumbColor
The thumb color of the Switch when on.
Type: string
offThumbColor
The thumb color of the Switch when off.
Type: string
colorScheme
Color scheme to be used for the Switch
Type: string
_hover
Props when Switch is hovered. Accepts all the Switch props.
Type: any
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