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