useRadio

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

Import#

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

Return value#

The useRadio hook returns following props

NameTypeDescription
stateRadioStateAn object that contains all props defining the current state of a radio.
getRadioPropsPropGetterA function to get the props of the radio.
getInputPropsPropGetterA function to get the props of the input field.
getLabelPropsPropGetterA function to get the props of the radio label.
getRootPropsPropGetterA function to get the props of the radio root.
htmlProps{}An object with all htmlProps.

Usage#

function Example() {
const CustomRadio = (props) => {
const { image, ...radioProps } = props
const { state, getInputProps, getRadioProps, htmlProps, getLabelProps } =
useRadio(radioProps)
return (
<chakra.label {...htmlProps} cursor='pointer'>
<input {...getInputProps({})} hidden />
<Box
{...getRadioProps()}
bg={state.isChecked ? 'green.200' : 'transparent'}
w={12}
p={1}
rounded='full'
>
<Image src={image} rounded='full' {...getLabelProps()} />
</Box>
</chakra.label>
)
}
return (
<div>
<CustomRadio image={'https://randomuser.me/api/portraits/men/86.jpg'} />
</div>
)
}

Parameters#

The useRadio hook accepts an object with the following properties:

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel