Switch | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
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