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:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeRadioProps
configPlumeRadio Configuration for this component
refInstance of PlumeRadioRef providing programmatic access

Return value

The useRadio hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component
stateRadioGroupState

Plume Config

KeyDescriptionRequired?
isSelectedVariantVariant to activate when the Radio is checked, according to props.isSelectedRequired
isDisabledVariantVariant to activate when the Radio is disabled, according to props.isDisabledRecommended
hasLabelVariantVariant to activate when the Radio has a text label, specified as props.children.Recommended; a form control without label is not accessible
labelSlotSlot name for the Radio label; will be filled with props.childrenRecommended
rootName of the root element of the component; will be rendered as a labelRequired

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