Introduction

Chakra UI, a popular React component library, offers a convenient way to implement checkboxes. In this article, we will learn how to implement checkboxes using Chakra UI.

Prerequisites

Implement Chakra UI Checkbox in Next.js

Step 1. Create the Next Js Project using the following command.

npx create-next-app my-test-app

Step 2. Install Chakra UI and its dependencies using the following command.

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Step 3. Install Chakra UI Icons for adding icons to your checkbox

npm install @chakra-ui/icons

Step 4. Now, let's create a Chakra UI Checkbox component in a Next.js application.

Create a Chakra UI component.

import React, { useState } from 'react';
import { Checkbox, CheckboxGroup, Stack } from '@chakra-ui/react';
import { CheckIcon } from '@chakra-ui/icons';

const MyCheckbox = () => {
  const [checkedItems, setCheckedItems] = useState([false, false]);

  const allChecked = checkedItems.every(Boolean);
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;

  return (
    <>
      <Container maxW="xl">
        <Checkbox defaultChecked>Checkbox</Checkbox>

        <span>Disabled Checkbox</span>
        <Stack spacing={5} direction='row'>
          <Checkbox isDisabled>Checkbox</Checkbox>
          <Checkbox isDisabled defaultChecked>
            Checkbox
          </Checkbox>
        </Stack>
        
        <span>Checkbox with custom color</span>
        <Stack spacing={5} direction='row'>
          <Checkbox colorScheme='red' defaultChecked>
            Checkbox
          </Checkbox>
          <Checkbox colorScheme='green' defaultChecked>
            Checkbox
          </Checkbox>
        </Stack>

        <span>Checkbox sizes</span>
        <Stack spacing={[1, 5]} direction={['column', 'row']}>
          <Checkbox size='sm' colorScheme='red'>
            Checkbox
          </Checkbox>
          <Checkbox size='md' colorScheme='green' defaultChecked>
            Checkbox
          </Checkbox>
          <Checkbox size='lg' colorScheme='orange' defaultChecked>
            Checkbox
          </Checkbox>
        </Stack>

        <span>Indeterminate</span>
        <Checkbox
          isChecked={allChecked}
          isIndeterminate={isIndeterminate}
          onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
        >
          Parent Checkbox
        </Checkbox>
        <Stack pl={6} mt={1} spacing={1}>
          <Checkbox
            isChecked={checkedItems[0]}
            onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
          >
            Child Checkbox 1
          </Checkbox>
          <Checkbox
            isChecked={checkedItems[1]}
            onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
          >
            Child Checkbox 2
          </Checkbox>
        </Stack>
      </Container>
    </>
  );
}

export default MyCheckbox;

Step 5. Run the application using the following command.

npm start

Chakra UI

Summary

In this article, we learned about how the Chakra UI Checkbox can be implemented in Next Js.