Refers to the id
of the element that labels the radio element.
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
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 } = propsconst { 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-describedby
string
data-radiogroup
data-radiogroup
@internal
any
defaultChecked
defaultChecked
If true
, the radio will be initially checked.
boolean
defaultIsChecked
defaultIsChecked
If true
, the radio will be initially checked.
@deprecated Please use defaultChecked
which mirrors the default prop
name for radio elements.
boolean
id
id
id assigned to input
string
isChecked
isChecked
If true
, the radio will be checked.
You'll need to pass onChange
to update its value (since it is now controlled)
boolean
isDisabled
isDisabled
If true
, the radio will be disabled
boolean
isFocusable
isFocusable
If true
and isDisabled
is true, the radio will remain
focusable but not interactive.
boolean
isInvalid
isInvalid
If true
, the radio button will be invalid. This also sets `aria-invalid` to true
.
boolean
isReadOnly
isReadOnly
If true
, the radio will be read-only
boolean
isRequired
isRequired
If true
, the radio button will be required. This also sets `aria-required` to true
.
boolean
name
name
The name of the input field in a radio (Useful for form submission).
string
onChange
onChange
Function called when checked state of the input
changes
((event: ChangeEvent<HTMLInputElement>) => void)
value
value
The value to be used in the radio button. This is the value that will be returned on form submission.
string | number