Switch | NativeBase

3.4.x

Search

⌘

K

Introduction

Getting Started

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

NativeBase Factory

SafeAreaView Props

Theme

Customizing Theme

Customizing Fonts

Customizing Components

Making components dark mode compatible

Layout

VStack / Column

Forms

Data Display

Feedback

Typography

Typography

Disclosure

Media and Icons

Transition

PresenceTransition

Others

ReactNative Components

KeyboardAvoidingView

Hooks

useBreakpointValue

useColorModeValue

useContrastText

useAccessibleColors

Examples

Community Integration

React Hook Forms

Recipes

Designs

Drawer Navigation

Forms

Form with Validation

Login/Signup Forms

Layout

Migration

Components Migration

More

If you are starting a new project, please try gluestack-ui for better performance and new design.

Switch

The Switch component is an alternative to the Checkbox component. You can switch between enabled or disabled states.

Examples

Basic


Playground
const Example = () => {
  return <HStack alignItems="center" space={8}>
      <Text fontSize="lg">Setting 1</Text>
      <Switch />
    </HStack>;
};const Example = () => {
  return <HStack alignItems="center" space={8}>
      <Text fontSize="lg">Setting 1</Text>
      <Switch />
    </HStack>;
};

Sizes


Playground
const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading>Switch Sizes</Heading>
      <Switch size="sm" />
      <Switch size="md" />
      <Switch size="lg" />
    </VStack>;
};const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading>Switch Sizes</Heading>
      <Switch size="sm" />
      <Switch size="md" />
      <Switch size="lg" />
    </VStack>;
};

Track & Thumb Color


Playground
const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading>Switch Track & Thumb Color</Heading>
      <Switch />
      <Switch offTrackColor="rose.200" onTrackColor="lime.200" />
      <Switch offThumbColor="rose.200" onThumbColor="lime.200" />
    </VStack>;
};const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading>Switch Track & Thumb Color</Heading>
      <Switch />
      <Switch offTrackColor="rose.200" onTrackColor="lime.200" />
      <Switch offThumbColor="rose.200" onThumbColor="lime.200" />
    </VStack>;
};

Color Schemes


Playground
const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading>Switch ColorScheme</Heading>
      <Switch colorScheme="primary" />
      <Switch colorScheme="secondary" />
      <Switch colorScheme="emerald" />
    </VStack>;
};const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading>Switch ColorScheme</Heading>
      <Switch colorScheme="primary" />
      <Switch colorScheme="secondary" />
      <Switch colorScheme="emerald" />
    </VStack>;
};

Props

Switch implements

Switch from React Native

,

,

,

,

,

,

,

,

,

BackgroundProps

,

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.

Quick Nav

Track & Thumb Color

Keyboard Interactions

MadeWithNativeBase