useCheckbox

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#

import { useCheckbox } from '@chakra-ui/react'

Return value#

The useCheckbox hook returns following props

NameTypeDescription
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.

Usage#

function Example() {
const CustomCheckbox = (props) => {
const { state, getCheckboxProps, getInputProps, getLabelProps, htmlProps } =
useCheckbox(props)
return (
<chakra.label
display='flex'
flexDirection='row'
alignItems='center'
gridColumnGap={2}
maxW='36'
bg='green.50'
border='1px solid'
borderColor='green.500'
rounded='lg'
px={3}
py={1}
cursor='pointer'
{...htmlProps}
>
<input {...getInputProps()} hidden />
<Flex
alignItems='center'
justifyContent='center'
border='2px solid'
borderColor='green.500'
w={4}
h={4}
{...getCheckboxProps()}
>
{state.isChecked && <Box w={2} h={2} bg='green.500' />}
</Flex>
<Text color='gray.700' {...getLabelProps()}>
Click me
</Text>
</chakra.label>
)
}
return (
<div>
<CustomCheckbox />
</div>
)
}

Parameters#

The useCheckbox hook accepts an object with the following properties:

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel