The useCheckbox hook implements interactivity and accessibility for a Checkbox.


The useCheckbox hook takes in the following arguments:

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:

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

Plume Config

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


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

      labelSlot: 'children',

      root: 'root'
  return <PlasmicCheckbox {...plumeProps} />;

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


Implemented using useCheckbox and useToggleState.