useRadio

The useRadio hook implements interactivity and accessibility for a Radio button. A Radio button must be a descendant of a RadioGroup.

Arguments

The useRadio hook takes in the following arguments:

Argument	Description
`plasmicClass`	The generated `Plasmic*` class for your designed component
`props`	props for your component, which extends from PlumeRadioProps
`config`	PlumeRadio Configuration for this component
`ref`	Instance of PlumeRadioRef providing programmatic access

Return value

The useRadio hook returns an object with these keys:

Key	Description
`plumeProps`	Props to spread onto your `Plasmic*` component
`state`	`RadioGroupState`

Plume Config

Key	Description	Required?
`isSelectedVariant`	Variant to activate when the Radio is checked, according to `props.isSelected`	Required
`isDisabledVariant`	Variant to activate when the Radio is disabled, according to `props.isDisabled`	Recommended
`hasLabelVariant`	Variant to activate when the Radio has a text label, specified as `props.children`.	Recommended; a form control without label is not accessible
`labelSlot`	Slot name for the Radio label; will be filled with `props.children`	Recommended
`root`	Name of the root element of the component; will be rendered as a label	Required

Example

interface RadioProps extends PlumeRadioProps {

}
function Radio_(
  props: RadioProps,
  ref: PlumeRadioRef
) {
  const {plumeProps, state} = useRadio(
    PlasmicRadio,
    props,
    {
      isSelectedVariant: ["state", "isSelected"],
      isDisabledVariant: ["state", "isDisabled"],
      hasLabelVariant: ["hasLabel", "hasLabel"],

      labelSlot: ["hasLabel", "children"],

      root: "root"
    },
    ref
  );
  return <PlumeRadio {...plumeProps} />;
}

const Radio = React.forwardRef(Radio_);
export default Radio;

React-Aria

Implemented using useRadio and useRadioGroupState