@chakra-ui/checkbox

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>
  );
}