Checkbox

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Native HTML checkboxes are 100% accessible by default, so we used a very common CSS technique to style the checkboxes.

Import#

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

Usage#

Basic usage of Checkbox.

Checkbox

<Checkbox defaultIsChecked>Checkbox</Checkbox>

<Checkbox defaultIsChecked>Checkbox</Checkbox>

Editable Example

Disabled Checkbox#

CheckboxCheckbox

<Stack spacing={10} direction="row">
  <Checkbox isDisabled>Checkbox</Checkbox>
  <Checkbox isDisabled defaultIsChecked>
    Checkbox
  </Checkbox>
</Stack>

<Stack spacing={10} direction="row">
  <Checkbox isDisabled>Checkbox</Checkbox>
  <Checkbox isDisabled defaultIsChecked>
    Checkbox
  </Checkbox>
</Stack>

Editable Example

Checkbox with custom color#

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

CheckboxCheckbox

<Stack spacing={10} direction="row">
  <Checkbox colorScheme="red" defaultIsChecked>
    Checkbox
  </Checkbox>
  <Checkbox colorScheme="green" defaultIsChecked>
    Checkbox
  </Checkbox>
</Stack>

<Stack spacing={10} direction="row">
  <Checkbox colorScheme="red" defaultIsChecked>
    Checkbox
  </Checkbox>
  <Checkbox colorScheme="green" defaultIsChecked>
    Checkbox
  </Checkbox>
</Stack>

Editable Example

Checkbox sizes#

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

CheckboxCheckboxCheckbox

<HStack spacing={10} direction="row">
  <Checkbox size="sm" colorScheme="red">
    Checkbox
  </Checkbox>
  <Checkbox size="md" colorScheme="green" defaultIsChecked>
    Checkbox
  </Checkbox>
  <Checkbox size="lg" colorScheme="orange" defaultIsChecked>
    Checkbox
  </Checkbox>
</HStack>

<HStack spacing={10} direction="row">
  <Checkbox size="sm" colorScheme="red">
    Checkbox
  </Checkbox>
  <Checkbox size="md" colorScheme="green" defaultIsChecked>
    Checkbox
  </Checkbox>
  <Checkbox size="lg" colorScheme="orange" defaultIsChecked>
    Checkbox
  </Checkbox>
</HStack>

Editable Example

Invalid Checkbox#

Checkbox

<Checkbox isInvalid>Checkbox</Checkbox>

<Checkbox isInvalid>Checkbox</Checkbox>

Editable Example

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#

Parent Checkbox

Child Checkbox 1Child Checkbox 2

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

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

Editable Example

Icon#

Hello world

/**
 * 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 (
    <Icon viewBox="0 0 24 24" {...rest}>
      <path fill="currentColor" d={d} />
    </Icon>
  )
}

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

render(<CustomCheckbox />)

/**
 * 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 (
    <Icon viewBox="0 0 24 24" {...rest}>
      <path fill="currentColor" d={d} />
    </Icon>
  )
}
function CustomCheckbox() {
  return (
    <Checkbox icon={<CustomIcon />} colorScheme="cyan">
      Hello world
    </Checkbox>
  )
}
render(<CustomCheckbox />)

Editable Example

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.

NarutoSasukekakashi

<CheckboxGroup colorScheme="green" defaultValue={["naruto", "kakashi"]}>
  <HStack>
    <Checkbox value="naruto">Naruto</Checkbox>
    <Checkbox value="sasuke">Sasuke</Checkbox>
    <Checkbox value="kakashi">kakashi</Checkbox>
  </HStack>
</CheckboxGroup>

<CheckboxGroup colorScheme="green" defaultValue={["naruto", "kakashi"]}>
  <HStack>
    <Checkbox value="naruto">Naruto</Checkbox>
    <Checkbox value="sasuke">Sasuke</Checkbox>
    <Checkbox value="kakashi">kakashi</Checkbox>
  </HStack>
</CheckboxGroup>

Editable Example

Hooks#

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

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

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`

Type

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

Default

"blue"

`defaultIsChecked`

Description

If true, the checkbox will be initially checked. @deprecated Please use the defaultChecked prop, which mirrors default React checkbox behavior.

Type

boolean

`icon`

Description

The checked icon to use

Type

React.ReactElement

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

`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

`isDisabled`

Description

If true, the checkbox will be disabled

Type

boolean

`isFocusable`

Description

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

Type

boolean

`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

`isInvalid`

Description

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

Type

boolean

`isReadOnly`

Description

If true, the checkbox will be readonly

Type

boolean

`isRequired`

Description

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

Type

boolean

`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>) => void)

`size`

Type

"sm" | "md" | "lg"

Default

"md"

`spacing`

Description

The spacing between the checkbox and its label text

Type

SystemProps["marginLeft"]

Default

0.5rem

`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

Variants for Checkbox are not implemented in the default theme. You can extend the theme to implement them.

Type

string

CheckboxGroup Props#

`colorScheme`

Description

Color Schemes for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.

Type

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

`defaultValue`

Description

The initial value of the checkbox group

Type

ReactText[]

`isDisabled`

Description

If true, all wrapped checkbox inputs will be disabled

Type

boolean

`isNative`

Description

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

Type

boolean

`onChange`

Description

The callback fired when any children Checkbox is checked or unchecked

Type

((value: ReactText[]) => void)

`size`

Type

"sm" | "md" | "lg"

`value`

Description

The value of the checkbox group

Type

ReactText[]

`variant`

Description

Variants for CheckboxGroup are not implemented in the default theme. You can extend the theme to implement them.

Type

string

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.

Edit this page