useCheckbox

The useCheckbox hook implements interactivity and accessibility for a Checkbox.

Arguments

The useCheckbox hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeCheckboxProps
configPlumeCheckbox Configuration for this component
refInstance of PlumeCheckboxRef providing programmatic access

Return value

The useCheckbox hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component
stateToggleState as returned by useToggleState

Plume Config

KeyDescriptionRequired?
isSelectedVariantVariant to activate when the Checkbox is checked, according to props.isSelectedRequired
isIndeterminateVariantVariant to activate when the Checkbox is “indeterminate”, according to props.isIndeterminateOptional, if you don’t want to support “indeterminate” case
isDisabledVariantVariant to activate when the Button is disabled, according to props.isDisabledRecommended
hasLabelVariantVariant to activate when the Checkbox has a text label, specified as props.children.Recommended; a checkbox without label is not accessible
labelSlotSlot name for the Checkbox label; will be filled with props.childrenRecommended
rootName of the root element of the component; will have an invisible <input type="checkbox"/> element injected as a child, and rendered as a label tag.Required

Example

interface CheckboxProps extends PlumeCheckboxProps {

}
function Checkbox_(
  props: CheckboxProps,
  ref: PlumeCheckboxRef
) {
  const {plumeProps, state} = useCheckbox(
    PlasmicCheckbox,
    props,
    {
      isSelectedVariant: ["state", "isSelected"],
      isIndeterminateVariant: ["state", "isIndeterminate"],
      isDisabledVariant: ["isDisabled", "isDisabled"],
      hasLabelVariant: ["hasLabel", "hasLabel"],

      labelSlot: "children",

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

const Checkbox = React.forwardRef(Checkbox_);
export default Checkbox;

React-Aria

Implemented using useCheckbox and useToggleState.