Skip to content
Docs
Components
Inputs
Switch

Slider

A simple Switch component.

Import

import { Switch } from "react-native-ficus-ui";

Usage

Default

EDITABLE EXAMPLE
const SimpleSwitch = () => {
  const [isChecked, toggle] = React.useState(false);

  return (
    <Switch isChecked={isChecked} onPress={() => toggle(!isChecked)} />
  );
}
render(<SimpleSwitch />)

Change color

EDITABLE EXAMPLE
const SimpleSwitch = () => {
  const [isChecked, toggle] = React.useState(false);

  return (
    <Switch colorScheme="red" isChecked={isChecked} onPress={() => toggle(!isChecked)} />
  );
}
render(<SimpleSwitch />)

Sizes

EDITABLE EXAMPLE
const SimpleSwitch = () => {
  const [isChecked1, toggle1] = React.useState(false);
  const [isChecked2, toggle2] = React.useState(false);
  const [isChecked3, toggle3] = React.useState(false);
  const [isChecked4, toggle4] = React.useState(false);

  return (
    <HStack spacing="md">
      <Switch size="xs" isChecked={isChecked1} onPress={() => toggle1(!isChecked1)} />
      <Switch size="sm" colorScheme="blue" isChecked={isChecked2} onPress={() => toggle2(!isChecked2)} />
      <Switch size="md" colorScheme="orange" isChecked={isChecked3} onPress={() => toggle3(!isChecked3)} />
      <Switch size="lg" colorScheme="purple" isChecked={isChecked4} onPress={() => toggle4(!isChecked4)} />
    </HStack>
  );
}
render(<SimpleSwitch />)

Change animation duration

EDITABLE EXAMPLE
const SimpleSwitch = () => {
  const [isChecked, toggle] = React.useState(false);

  return (
    <Switch colorScheme="red" duration={100} isChecked={isChecked} onPress={() => toggle(!isChecked)} />
  );
}
render(<SimpleSwitch />)

Disabled

EDITABLE EXAMPLE
const SimpleSwitch = () => {
  return (
    <HStack spacing="md">
      <Switch isDisabled isChecked={false} />
      <Switch isDisabled isChecked />
    </HStack>
  );
}
render(<SimpleSwitch />)

Props

Extends every Box props.

colorScheme

The colorScheme property, will define background color of switch when is active.

TypeRequiredDefault
stringNo

isDisabled

Disables onPress handler when true.

TypeRequiredDefault
booleanNo

isChecked

Makes the toggle checked when true.

TypeRequiredDefault
booleanNo

onPress

onPress event handler.

TypeRequiredDefault
functionNo