useRadioGroup

The useRadioGroup hook implements interactivity and accessibility for a group of Radio buttons. All Radio buttons must be wrapped in a RadioGroup.

Arguments

The useRadioGroup hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeRadioGroupProps
configPlumeRadioGroup Configuration for this component
refInstance of PlumeRadioGroupRef providing programmatic access

Return value

The useRadioGroup hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component
stateRadioGroupState

Plume Config

KeyDescriptionRequired?
isHorizontalVariantVariant to activate when the radio buttons are laid out horizontally in this group. Default is vertical.Optional
isDisabledVariantVariant to activate when the RadioGroup is disabled, according to props.isDisabledRecommended
hasLabelVariantVariant to activate when the RadioGroup has a text label, specified as props.label.Recommended; a form control without label is not accessible
optionsSlotSlot name for the Radios for this group; will be filled with props.childrenRequired
labelSlotSlot name for the RadioGroup label; will be filled with props.label
rootName of the root element of the componentRequired
labelContainerName of the label container of the componentRecommended

Example

interface RadioGroupProps extends PlumeRadioGroupProps {

}
function RadioGroup_(
  props: RadioGroupProps,
  ref: PlumeRadioGroupRef
) {
  const {plumeProps, state} = useRadioGroup(
    PlasmicRadioGroup,
    props,
    {
      isHorizontalVariant: ["orientation", "horizontal"],
      isDisabledVariant: ["state", "isDisabled"],
      hasLabelVariant: ["hasLabel", "hasLabel"],

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

const RadioGroup = React.forwardRef(RadioGroup_);
export default RadioGroup;

React-Aria

Implemented using useRadioGroup and useRadioGroupState