Checkbox

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

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.

Editable Example

Disabled Checkbox#

Editable Example

Checkbox with custom color#

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

Editable Example

Checkbox sizes#

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

Editable Example

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

Editable Example

Icon#

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.

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#

NameTypeDescriptionDefault
colorSchemestring-
defaultIsCheckedbooleanIf `true`, the checkbox will be initially checked. @deprecated Please use the `defaultChecked` prop, which mirrors default React checkbox behavior.-
iconReact.ReactElementThe checked icon to useCheckboxIcon
iconColorstringThe color of the checkbox icon when checked or indeterminate-
iconSizestring | numberThe size of the checkbox icon when checked or indeterminate-
isCheckedbooleanIf `true`, the checkbox will be checked. You'll need to pass `onChange` to update its value (since it is now controlled)-
isDisabledbooleanIf `true`, the checkbox will be disabled-
isFocusablebooleanIf `true` and `isDisabled` is passed, the checkbox will remain tabbable but not interactive-
isIndeterminatebooleanIf `true`, the checkbox will be indeterminate. This only affects the icon shown inside checkbox and does not modify the isChecked property.-
isInvalidbooleanIf `true`, the checkbox is marked as invalid. Changes style of unchecked state.-
isReadOnlybooleanIf `true`, the checkbox will be readonly-
isRequiredbooleanIf `true`, the checkbox input is marked as required, and `required` attribute will be added-
namestringThe name of the input field in a checkbox (Useful for form submission).-
onChange((event: ChangeEvent<HTMLInputElement>) => void)The callback invoked when the checked state of the `Checkbox` changes..-
sizestring-
spacingSystemProps["marginLeft"]The spacing between the checkbox and its label text0.5rem
valuestring | numberThe value to be used in the checkbox input. This is the value that will be returned on form submission.-
variantstring-

CheckboxGroup Props#

NameTypeDescriptionDefault
colorSchemestring-
defaultValueReactText[]The initial value of the checkbox group-
isNativebooleanIf `true`, input elements will receive `checked` attribute instead of `isChecked`. This assumes, you're using native radio inputs-
onChange((value: ReactText[]) => void)The callback fired when any children Checkbox is checked or unchecked-
sizestring-
valueReactText[]The value of the checkbox group-
variantstring-

Shared Style Props#

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

NameTypeDefaultDescription
colorSchemestringThe color of the checkbox when it is checked. This should be one of the color keys in the theme (e.g."green", "red").
childrenReact.ReactNodeThe content of the checkbox group.
sizesm, md, lgmdThe size of the checkbox.
variantstringThe variant of the checkbox.
Edit this page