@chakra-xui/switch

A React component to view and switch between on or off states.

Usage no npm install needed!

<script type="module">
  import chakraXuiSwitch from 'https://cdn.skypack.dev/@chakra-xui/switch';
</script>

README

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" />