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
| Name | Type | Description |
|---|---|---|
state | RadioState | An object that contains all props defining the current state of a radio. |
getCheckboxProps | PropGetter | A function to get the props of the radio. |
getInputProps | PropGetter | A function to get the props of the input field. |
getLabelProps | PropGetter | A function to get the props of the radio label. |
getRootProps | PropGetter | A function to get the props of the radio root. |
htmlProps | {} | An object with all htmlProps. |
The
getCheckboxPropsfunction 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
aria-describedbyRefers to the id of the element that labels the radio element.
stringdata-radiogroup
data-radiogroup@internal
anydefaultChecked
defaultCheckedIf true, the radio will be initially checked.
booleanid
idid assigned to input
stringisChecked
isCheckedIf true, the radio will be checked.
You'll need to pass onChange to update its value (since it is now controlled)
booleanisDisabled
isDisabledIf true, the radio will be disabled
booleanisFocusable
isFocusableIf true and isDisabled is true, the radio will remain
focusable but not interactive.
booleanisInvalid
isInvalidIf true, the radio button will be invalid. This also sets `aria-invalid` to true.
booleanisReadOnly
isReadOnlyIf true, the radio will be read-only
booleanisRequired
isRequiredIf true, the radio button will be required. This also sets `aria-required` to true.
booleanname
nameThe name of the input field in a radio (Useful for form submission).
stringonChange
onChangeFunction called when checked state of the input changes
((event: ChangeEvent<HTMLInputElement>) => void)value
valueThe value to be used in the radio button. This is the value that will be returned on form submission.
string | number