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 { useRadio } from "@nature-ui/core";

Return value#

The useRadio hook returns following props

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.


function Example() {
const CustomRadio = (props) => {
const { image, ...radioProps } = props;
const { state, getInputProps, getCheckboxProps, htmlProps, getLabelProps } =
return (
<nature.label {...htmlProps} className="cursor-pointer">
<input {...getInputProps({})} hidden />
className={`rounded-full w-12 p-1 ${
state.isChecked ? "bg-green-200" : "bg-transparent"
<Image src={image} className="rounded-full" {...getLabelProps()} />
return (
<CustomRadio image={""} />