@chakra-ui/checkbox

Checkbox component is used in forms when a user needs to select multiple values from several options.

Installation

yarn add @chakra-ui/checkbox

# or

npm i @chakra-ui/checkbox

Import component

import { Checkbox } from "@chakra-ui/checkbox"

Usage

<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.

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