@chakra-ui/checkbox

What is @chakra-ui/checkbox?

@chakra-ui/checkbox is a component library for creating accessible and customizable checkbox components in React applications. It is part of the Chakra UI library, which provides a set of accessible, reusable, and composable React components.

What are @chakra-ui/checkbox's main functionalities?

Basic Checkbox

This feature allows you to create a basic checkbox component. The Checkbox component can be used to render a simple checkbox with a label.

import { Checkbox } from '@chakra-ui/react';

function BasicCheckbox() {
  return <Checkbox>Checkbox</Checkbox>;
}

Checkbox Group

This feature allows you to create a group of checkboxes. The CheckboxGroup component helps manage the state of multiple checkboxes and can be used to render a group of checkboxes with a shared color scheme and default values.

import { Checkbox, CheckboxGroup } from '@chakra-ui/react';

function CheckboxGroupExample() {
  return (
    <CheckboxGroup colorScheme="green" defaultValue={['one', 'two']}>
      <Checkbox value="one">One</Checkbox>
      <Checkbox value="two">Two</Checkbox>
      <Checkbox value="three">Three</Checkbox>
    </CheckboxGroup>
  );
}

Indeterminate Checkbox

This feature allows you to create an indeterminate checkbox. The useCheckbox hook can be used to manage the state of the checkbox and set it to an indeterminate state.

import { Checkbox, useCheckbox } from '@chakra-ui/react';

function IndeterminateCheckbox() {
  const { getCheckboxProps, getInputProps } = useCheckbox({
    isIndeterminate: true,
  });

  return (
    <Checkbox {...getCheckboxProps()}>
      <input {...getInputProps()} />
      Indeterminate Checkbox
    </Checkbox>
  );
}

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.

README

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