Switch | NativeBase


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">
      <Heading mb="10">Sizes</Heading>
      <Switch size="sm" />
      <Switch size="md" />
      <Switch size="lg" />
    </VStack>;
};const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading mb="10">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 textAlign="center" mb="10">
        Track & Thumb color
      </Heading>
      <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">
      <Heading textAlign="center" mb="10">
        Track & Thumb color
      </Heading>
      <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">
      <Heading textAlign="center" mb="10">
        Color Scheme
      </Heading>
      <Switch defaultIsChecked colorScheme="primary" />
      <Switch defaultIsChecked colorScheme="secondary" />
      <Switch defaultIsChecked colorScheme="emerald" />
    </VStack>;
};const Example = () => {
  return <VStack space={4} alignItems="center">
      <Heading textAlign="center" mb="10">
        Color Scheme
      </Heading>
      <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 | "px" | "0" | (string & {}) | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "container" | ... 30 more ... | "5/6">

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: ResponsiveValue<(string & {}) | "gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "coolGray.50" | "coolGray.100" | "coolGray.200" | ... 233 more ... | "dark.900">

offTrackColor

The track color of the Switch when off.

onThumbColor

The thumb color of the Switch when on.

offThumbColor

The thumb color of the Switch when off.

colorScheme

Color scheme to be used for the Switch

Type: string

_hover

Props when Switch is hovered. Accepts all the Switch props.

Type: Omit<ISwitchProps, "_hover">