Switch
The Switch component is used as an alternative for the checkbox component, switch between enabled or disabled states.
Installation
yarn add @chakra-ui/switch
# or
npm i @chakra-ui/switchImport component
import { Switch } from "@chakra-ui/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" />