@hackr/chakra-ui-switch v1.0.0-rc.9

Switch

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

Installation

yarn add @hackr/chakra-ui-switch

# or

npm i @hackr/chakra-ui-switch

Import component

import { Switch } from "@hackr/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" />