Switch | NativeBase

NativeBase

3.4.x

Announcing NativeBase Startup+ bundle 🎉

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Creating a Universal App with NativeBase and Solito

New

Core Concepts

Utility First

Utility Props Specificity

Design Tokens

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Internal Pseudo Props

New

Responsive

Features

Utility Props

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

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
const Example = () => {
  return <Switch size="lg" />;
};const Example = () => {
  return <Switch size="lg" />;
};

Examples

Basic


Playground
const Example = () => {
  return <HStack alignItems="center" space={4}>
      <Text>Bluetooth</Text>
      <Switch size="sm" />
    </HStack>;
};const Example = () => {
  return <HStack alignItems="center" space={4}>
      <Text>Bluetooth</Text>
      <Switch size="sm" />
    </HStack>;
};

Sizes


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

Track & Thumb Color


Playground
const Example = () => {
  return <VStack space={4} alignItems="center">
      <Switch />
      <Switch offTrackColor="orange.100" onTrackColor="orange.200" onThumbColor="orange.500" offThumbColor="orange.50" />
      <Switch offTrackColor="indigo.100" onTrackColor="indigo.200" onThumbColor="indigo.500" offThumbColor="indigo.50" />
    </VStack>;
};const Example = () => {
  return <VStack space={4} alignItems="center">
      <Switch />
      <Switch offTrackColor="orange.100" onTrackColor="orange.200" onThumbColor="orange.500" offThumbColor="orange.50" />
      <Switch offTrackColor="indigo.100" onTrackColor="indigo.200" onThumbColor="indigo.500" offThumbColor="indigo.50" />
    </VStack>;
};

Color Schemes


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

Props

Switch implements

Switch from React Native

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.