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 { Checkbox, CheckboxGroup } from "@nature-ui/core";


Basic usage of Checkbox.

<Checkbox defaultIsChecked>Checkbox</Checkbox>

Disabled Checkbox#

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

Checkbox with custom color#

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

<Stack spacing={10} row>
<Checkbox color="bg-purple-500 hover:bg-purple-700" defaultIsChecked>
<Checkbox color="bg-green-500 hover:bg-green-700" defaultIsChecked>

Checkbox sizes#

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

<Stack spacing={10} row>
<Checkbox size="sm" color="bg-purple-500 hover:bg-purple-700">
<Checkbox size="md" color="bg-green-500 hover:bg-green-700" defaultIsChecked>
color="bg-orange-500 hover:bg-orange-700"

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="gray-900" iconSize="1rem">


function IndeterminateExample() {
const [checkedItems, setCheckedItems] = React.useState([false, false]);
const allChecked = checkedItems.every(Boolean);
const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
return (
onChange={(e) => setCheckedItems([,])}
Parent Checkbox
<Stack className={"pl-6 mt-1"} spacing={1}>
onChange={(e) => setCheckedItems([, checkedItems[1]])}
Child Checkbox 1
onChange={(e) => setCheckedItems([checkedItems[0],])}
Child Checkbox 2


Nature UI 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.

color="bg-green-600 hover:bg-green-700"
defaultValue={["naruto", "kakashi"]}
<Stack row>
<Checkbox value="naruto">Naruto</Checkbox>
<Checkbox value="sasuke">Sasuke</Checkbox>
<Checkbox value="kakashi">kakashi</Checkbox>


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.


Checkbox Props#

idstringThe id assigned to input field
namestringThe name of the input field in a checkbox (Useful for form submission)
valuestring or numberThe value to be used in the checkbox input. This is the value that will be returned on form submission.
colorstringThe color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
defaultIsCheckedbooleanIf true, the checkbox will be initially checked.
isCheckedbooleanIf true, the checkbox will be checked. You'll need to pass onChange to update it's value (since it's now controlled)
isIndeterminatebooleanIf true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox
isFullWidthbooleanIf true, the checkbox should take up the full width of the parent.
sizesm, md, lgmdThe size (width and height) of the checkbox
isDisabledbooleanIf true, the checkbox will be disabled
isInvalidbooleanIf true, the checkbox is marked as invalid. Changes style of unchecked state.
childrenReact.ReactNodeThe children of the checkbox.
onChangefunctionFunction called when the state of the checkbox changes.
onBlurfunctionFunction called when you blur out of the checkbox.
onFocusfunctionFunction called when the checkbox receive focus.
aria-labelstringAn accessible label for the checkbox in event there's no visible label or children passed
aria-labelledbystringId that points to the label for the checkbox in event no children was passed

CheckboxGroup Props#

CheckboxGroup composes Box so you can pass all Box props.

idstringThe id of the checkbox group.
namestringThe name of the checkbox group. This attribute is
valueArray<Checkbox["value"]>The value of the checkbox group
defaultValueArray<Checkbox["value"]>The initial value of the checkbox group
colorSchemestringThe color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
onChange(values: Array<Checkbox["value"]>): voidThe callback fired when any children Checkbox is checked or unchecked
childrenReact.ReactNodeThe content of the checkbox group. Must be the Checkbox component
spacingStyledSystem.MarginProps8pxThe space between each checkbox
sizesm, md, lgmdThe size of the checkbox, it's forwarded to all children checkbox.