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

The getCheckboxProps function does return the props of the radio. The naming error is known. Changing it would mean a breaking change to a lot of users, which is why it will stay like this until the next major release.

Usage#

function Example() {
const CustomRadio = (props) => {
const { image, ...radioProps } = props
const { state, getInputProps, getCheckboxProps, htmlProps, getLabelProps } =
useRadio(radioProps)
return (
<chakra.label {...htmlProps} cursor='pointer'>
<input {...getInputProps({})} hidden />
<Box
{...getCheckboxProps()}
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:

aria-describedby

Description

Refers to the id of the element that labels the radio element.

Type
string

data-radiogroup

Description

@internal

Type
any

defaultChecked

Description

If true, the radio will be initially checked.

Type
boolean

id

Description

id assigned to input

Type
string

isChecked

Description

If true, the radio will be checked. You'll need to pass onChange to update its value (since it is now controlled)

Type
boolean

isDisabled

Description

If true, the radio will be disabled

Type
boolean

isFocusable

Description

If true and isDisabled is true, the radio will remain focusable but not interactive.

Type
boolean

isInvalid

Description

If true, the radio button will be invalid. This also sets `aria-invalid` to true.

Type
boolean

isReadOnly

Description

If true, the radio will be read-only

Type
boolean

isRequired

Description

If true, the radio button will be required. This also sets `aria-required` to true.

Type
boolean

name

Description

The name of the input field in a radio (Useful for form submission).

Type
string

onChange

Description

Function called when checked state of the input changes

Type
((event: ChangeEvent<HTMLInputElement>) => void)

value

Description

The value to be used in the radio button. This is the value that will be returned on form submission.

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel