@chakra-ui/checkbox

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

Similar packages

Other packages similar to @chakra-ui/checkbox

react-checkbox-group

react-checkbox-group is a lightweight library for managing groups of checkboxes in React. It provides a simple API for creating and managing checkbox groups, but it lacks the built-in accessibility and styling options provided by @chakra-ui/checkbox.

rc-checkbox

rc-checkbox is a React component for creating checkboxes. It offers basic checkbox functionality and customization options, but it does not provide the same level of accessibility and theming support as @chakra-ui/checkbox.

react-final-form

react-final-form is a form state management library for React. It includes components for creating and managing checkboxes within forms. While it offers powerful form management capabilities, it is more complex and not as focused on styling and accessibility as @chakra-ui/checkbox.