45 lines
857 B
Markdown
45 lines
857 B
Markdown
|
# @chakra-ui/checkbox
|
||
|
|
|
||
|
|
Checkbox component is used in forms when a user needs to select multiple values
|
||
|
|
from several options.
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
```sh
|
||
|
|
yarn add @chakra-ui/checkbox
|
||
|
|
|
||
|
|
# or
|
||
|
|
|
||
|
|
npm i @chakra-ui/checkbox
|
||
|
|
```
|
||
|
|
|
||
|
|
## Import component
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import { Checkbox } from "@chakra-ui/checkbox"
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Checkbox>This is a checkbox</Checkbox>
|
||
|
|
```
|
||
|
|
|
||
|
|
### CheckboxGroup
|
||
|
|
|
||
|
|
CheckboxGroup is used to bind multiple checkboxes into a group, and it indicates
|
||
|
|
whether one or more options are selected.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<CheckboxGroup defaultValue={["one", "two"]}>
|
||
|
|
<Checkbox value="one">One</Checkbox>
|
||
|
|
<Checkbox value="two">Two</Checkbox>
|
||
|
|
<Checkbox value="three">Three</Checkbox>
|
||
|
|
</CheckboxGroup>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Resources
|
||
|
|
|
||
|
|
- https://www.a11ymatters.com/pattern/checkbox/
|
||
|
|
- https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
|