Switch

The Switch component is used as an alternative for the checkbox component, switch between enabled or disabled states.

Installation

yarn add @chakra-xui/switch

# or

npm i @chakra-xui/switch

Import component

import { Switch } from "@chakra-xui/switch"

Usage

<Switch />

Sizes

Pass the size prop to change the size of the switch.

<>
  <Switch size="sm" marginLeft="1rem" colorScheme="green" />

  <Switch size="md" marginLeft="1rem" colorScheme="green" />

  <Switch size="lg" marginLeft="1rem" colorScheme="green" />
</>

Switch background-color

You can change the checked background color of the switch by passing the colorScheme prop

<Switch colorScheme="blue" />