useCheckbox is a custom hook used to provide checkbox functionality, as well as state and focus management to custom checkbox components when using it.


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

Return value#

The useCheckbox hook returns following props

stateCheckboxStateAn object that contains all props defining the current state of a checkbox.
getCheckboxPropsPropGetterA function to get the props of the checkbox.
getInputPropsPropGetterA function to get the props of the input field.
getLabelPropsPropGetterA function to get the props of the checkbox label.
htmlProps{}An object with all htmlProps.


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
return (
<CustomCheckbox />