useRadio

分类：

other

日期:

2022-2-27

标签：

chakra

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 } = 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`

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

string

`data-radiogroup`

@internal

any

`defaultChecked`

If true, the radio will be initially checked.

boolean

`id`

id assigned to input

string

`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`

If true, the radio will be disabled

boolean

`isFocusable`

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

boolean

`isInvalid`

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

boolean

`isReadOnly`

If true, the radio will be read-only

boolean

`isRequired`

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

boolean

`name`

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

string

`onChange`

Function called when checked state of the input changes

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

`value`

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

string | number