55 lines
921 B
Markdown
55 lines
921 B
Markdown
|
# Switch
|
||
|
|
|
||
|
|
The Switch component is used as an alternative for the checkbox component,
|
||
|
|
switch between enabled or disabled states.
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn add @chakra-ui/switch
|
||
|
|
|
||
|
|
# or
|
||
|
|
|
||
|
|
npm i @chakra-ui/switch
|
||
|
|
```
|
||
|
|
|
||
|
|
## Import component
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import { Switch } from "@chakra-ui/switch"
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Switch />
|
||
|
|
```
|
||
|
|
|
||
|
|
## Sizes
|
||
|
|
|
||
|
|
Pass the `size` prop to change the size of the switch.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<>
|
||
|
|
<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
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Switch colorScheme="blue" />
|
||
|
|
```
|
||
|
|
|
||
|
|
## Resources
|
||
|
|
|
||
|
|
- https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
|
||
|
|
- https://www.lightningdesignsystem.com/components/checkbox-button/
|