useCheckboxGroup is a custom hook that provides all the state management logic for a group of checkboxes.


import { useCheckboxGroup } from "@nature-ui/core";

Return value#

The useCheckboxGroup hook returns following props

valueStringOrNumber[]The value of checkbox group.
isDisabledbooleanA function to set the boolean value to false.
onChange(input: EventOrValue) => voidThe onChange handler for the checkbox group.
setValue(state: StringOrNumber[]) => voidA function to set the value of the checkbox group.
getCheckboxProps(props?: Dict) => DictA function that takes checkbox props returns them with a onChange handler for the checkbox group and the checked state.


function Example() {
const CustomCheckbox = (props) => {
const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } =
return (
className="flex flex-row items-center gap-x-2 max-w-[9rem] bg-green-100 border border-solid border-green-500 rounded-lg px-3 py-1 cursor-pointer"
<input {...getInputProps()} hidden />
className="items-center justify-center border-2 border-solid border-green-500 w-4 h-4"
{state.isChecked && <Box className="bg-green-500 h-2 w-2" />}
<p className="text-gray-700" {...getLabelProps()}>
Click me
const { value, getCheckboxProps } = useCheckboxGroup({
defaultValue: ["2"],
return (
The selected checkboxes are: {value.sort().join(" and ")}
<CustomCheckbox {...getCheckboxProps({ value: "1" })} />
<CustomCheckbox {...getCheckboxProps({ value: "2" })} />
<CustomCheckbox {...getCheckboxProps({ value: "3" })} />