Checkbox

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

Import#

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

Usage#

<Checkbox defaultChecked>Checkbox</Checkbox>

Disabled Checkbox#

<Stack spacing={5} direction='row'>
  <Checkbox isDisabled>Checkbox</Checkbox>
  <Checkbox isDisabled defaultChecked>
    Checkbox
  </Checkbox>
</Stack>

Checkbox with custom color#

You can override the color scheme of the Checkbox to any color key specified in theme.colors.

<Stack spacing={5} direction='row'>
  <Checkbox colorScheme='red' defaultChecked>
    Checkbox
  </Checkbox>
  <Checkbox colorScheme='green' defaultChecked>
    Checkbox
  </Checkbox>
</Stack>

Checkbox sizes#

Pass the size prop to change the size of the Checkbox. Values can be either sm, md or lg.

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

Invalid Checkbox#

<Checkbox isInvalid>Checkbox</Checkbox>

Changing the spacing#

We added the spacing prop to customize the spacing between the Checkbox and label text.

<Checkbox spacing='1rem'>Option</Checkbox>

Changing the icon color and size#

You can customize the color and size of the check icon by passing the iconColor and iconSize prop.

<Checkbox iconColor='blue.400' iconSize='1rem'>
  Option
</Checkbox>

Indeterminate#

function IndeterminateExample() {
  const [checkedItems, setCheckedItems] = React.useState([false, false])

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

  return (
    <>
      <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>
    </>
  )
}

Icon#

/**
 * 1. Create a custom icon that accepts 2 props: `isIndeterminate` and `isChecked`
 */
function CustomIcon(props) {
  const { isIndeterminate, isChecked, ...rest } = props

  const d = isIndeterminate
    ? 'M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.917,1,1,0,1,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.255a1,1,0,1,1-2,0,4,4,0,1,1,5.6,3.666Z'
    : 'M0,12a1.5,1.5,0,0,0,1.5,1.5h8.75a.25.25,0,0,1,.25.25V22.5a1.5,1.5,0,0,0,3,0V13.75a.25.25,0,0,1,.25-.25H22.5a1.5,1.5,0,0,0,0-3H13.75a.25.25,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0v8.75a.25.25,0,0,1-.25.25H1.5A1.5,1.5,0,0,0,0,12Z'

  return (
    <>
      {isChecked ? (
        <Icon viewBox='0 0 24 24' {...rest}>
          <path fill='currentColor' d={d} />
        </Icon>
      ) : null}
    </>
  )
}

function CustomCheckbox() {
  return (
    <Checkbox icon={<CustomIcon />} colorScheme='cyan'>
      Hello world
    </Checkbox>
  )
}

render(<CustomCheckbox />)

CheckboxGroup#

Chakra exports a CheckboxGroup component to help manage the checked state of its children Checkbox components and conveniently pass a few shared style props to each. See the props table at the bottom of this page for a list of the shared styling props.

<CheckboxGroup colorScheme='green' defaultValue={['naruto', 'kakashi']}>
  <Stack spacing={[1, 5]} direction={['column', 'row']}>
    <Checkbox value='naruto'>Naruto</Checkbox>
    <Checkbox value='sasuke'>Sasuke</Checkbox>
    <Checkbox value='kakashi'>Kakashi</Checkbox>
  </Stack>
</CheckboxGroup>

Hooks#

The useCheckbox hook is exported with state and focus management logic for use in creating tailor-made checkbox component for your application. Read more about the useCheckbox hook here.

The useCheckboxGroup hook is exported with state management logic for use in creating tailor-made checkbox group component for your application. Read more about the useCheckboxGroup hook here.

Props#

Checkbox Props#

`aria-describedby`

Type

string

`aria-invalid`

Type

true

`aria-label`

Description

Defines the string that labels the checkbox element.

Type

string

`aria-labelledby`

Description

Refers to the id of the element that labels the checkbox element.

Type

string

`colorScheme`

Description

The visual color appearance of the component

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

blue

`icon`

Description

The checked icon to use

Type

ReactElement<any, string | JSXElementConstructor<any>>

Default

CheckboxIcon

`iconColor`

Description

The color of the checkbox icon when checked or indeterminate

Type

string

`iconSize`

Description

The size of the checkbox icon when checked or indeterminate

Type

string | number

`id`

Description

id assigned to input

Type

string

`inputProps`

Description

Additional props to be forwarded to the input element

Type

InputHTMLAttributes<HTMLInputElement>

`isChecked`

Description

If true, the checkbox will be checked. You'll need to pass onChange to update its value (since it is now controlled)

Type

boolean

Default

false

`isDisabled`

Description

If true, the checkbox will be disabled

Type

boolean

Default

false

`isFocusable`

Description

If true and isDisabled is passed, the checkbox will remain tabbable but not interactive

Type

boolean

Default

false

`isIndeterminate`

Description

If true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the isChecked property.

Type

boolean

Default

false

`isInvalid`

Description

If true, the checkbox is marked as invalid. Changes style of unchecked state.

Type

boolean

Default

false

`isReadOnly`

Description

If true, the checkbox will be readonly

Type

boolean

Default

false

`isRequired`

Description

If true, the checkbox input is marked as required, and required attribute will be added

Type

boolean

Default

false

`name`

Description

The name of the input field in a checkbox (Useful for form submission).

Type

string

`onChange`

Description

The callback invoked when the checked state of the Checkbox changes.

Type

(event: ChangeEvent<HTMLInputElement>) => void

`onFocus`

Description

The callback invoked when the checkbox is focused

Type

(event: FocusEvent<HTMLInputElement, Element>) => void

`size`

Description

The size of the Checkbox

Type

"sm" | "md" | "lg"

Default

md

`spacing`

Description

The spacing between the checkbox and its label text

Type

ResponsiveValue<string | number | (string & {})>

Default

0.5rem

`tabIndex`

Description

The tab-index property of the underlying input element.

Type

number

`value`

Description

The value to be used in the checkbox input. This is the value that will be returned on form submission.

Type

string | number

`variant`

Description

The variant of the Checkbox

Type

string

CheckboxGroup Props#

`defaultValue`

Description

The initial value of the checkbox group

Type

(string | number)[]

`isDisabled`

Description

If true, all wrapped checkbox inputs will be disabled

Type

boolean

Default

false

`isNative`

Description

If true, input elements will receive checked attribute instead of isChecked. This assumes, you're using native radio inputs

Type

boolean

Default

false

`onChange`

Description

The callback fired when any children Checkbox is checked or unchecked

Type

(value: (string | number)[]) => void

`value`

Description

The value of the checkbox group

Type

(string | number)[]

Shared Style Props#

The following style props can be set on CheckboxGroup and they will be forwarded to all children Checkbox components.

Name	Type	Default	Description
colorScheme	`string`		The color of the checkbox when it is checked. This should be one of the color keys in the theme (e.g."green", "red").
children	`React.ReactNode`		The content of the checkbox group.
size	`sm`, `md`, `lg`	`md`	The size of the checkbox.
variant	`string`		The `variant` of the checkbox.

The Checkbox component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Component Style page.

Anatomy#

A: control
B: icon
C: container
D: label

Theming properties#

The properties that affect the theming of the Checkbox component are:

size: The size of the checkbox. Defaults to md.
colorScheme: The color scheme of the checkbox. Defaults to blue.

Theming utilities#

createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).
definePartsStyle: a function used to create multipart style objects.
defineMultiStyleConfig: a function used to define the style configuration for a multipart component.

import { checkboxAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(checkboxAnatomy.keys)

Customizing the default theme#

import { checkboxAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(checkboxAnatomy.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
  label: {
    fontFamily: 'mono', // change the font family of the label
  },
  control: {
    padding: 3, // change the padding of the control
    borderRadius: 0, // change the border radius of the control
  },
})

export const checkboxTheme = defineMultiStyleConfig({ baseStyle })

After customizing the checkbox theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@chakra-ui/react'
import { checkboxTheme } from './components/checkbox.ts'

export const theme = extendTheme({
  components: { Checkbox: checkboxTheme },
})

This is a crucial step to make sure that any changes that we make to the checkbox theme are applied.

Adding a custom size#

Let's assume we want to include an extra large checkbox size. Here's how we can do that:

import { checkboxAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(checkboxAnatomy.keys)

const sizes = {
  xl: definePartsStyle({
    control: defineStyle({
      boxSize: 14
    }),
    label: defineStyle({
      fontSize: "2xl",
      marginLeft: 6
    })
  }),
}

export const checkboxTheme = defineMultiStyleConfig({ sizes })

// Now we can use the new `xl` size
<Checkbox size="xl">...</Checkbox>

Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant#

Let's assume we want to include a custom circular variant. Here's how we can do that:

import { checkboxAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(checkboxAnatomy.keys)

const circular = definePartsStyle({
  control: defineStyle({
    rounded: "full"
  })
})

export const checkboxTheme = defineMultiStyleConfig({
  variants: { circular },
})

// Now we can use the new `circular` variant
<Checkbox variant="circular">...</Checkbox>

Changing the default properties#

Let's assume we want to change the default size and variant of every checkbox in our app. Here's how we can do that:

import { checkboxAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'

const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(
  checkboxAnatomy.keys,
)

export const checkboxTheme = defineMultiStyleConfig({
  defaultProps: {
    size: 'xl',
    variant: 'circular',
  },
})

// This saves you time, instead of manually setting the size and variant every time you use a checkbox:
<Checkbox size="xl" variant="circular">...</Checkbox>

Showcase#

import { Box, SimpleGrid, IconButton, Checkbox, useColorMode } from "@chakra-ui/react";
import { FaMoon, FaSun } from "react-icons/fa";

export default function App() {
  const { toggleColorMode, colorMode } = useColorMode();
  return (
    <Box position="relative">
      <SimpleGrid gap={12} p={12} columns={2}>
        <Checkbox>Themed Checkbox</Checkbox>
        <Checkbox size="xl">Themed XL Checkbox</Checkbox>
        <Checkbox variant="circular">Themed Circular Checkbox</Checkbox>
        <Checkbox variant="circular" size="xl">Themed XL Circular Checkbox</Checkbox>
        <Checkbox variant="circular" size="xl" colorScheme="red">Themed Red XL Circular Checkbox</Checkbox>
      </SimpleGrid>

      <IconButton
        aria-label="toggle theme"
        rounded="full"
        size="xs"
        position="absolute"
        bottom={4}
        left={4}
        onClick={toggleColorMode} icon={colorMode === "dark" ? <FaSun /> : <FaMoon />}
      />
    </Box>
  );
}

Edit this page on GitHub