useCheckbox

The useCheckbox hook implements interactivity and accessibility for a Checkbox.

Arguments

The useCheckbox 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 PlumeCheckboxProps
`config`	PlumeCheckbox Configuration for this component
`ref`	Instance of PlumeCheckboxRef providing programmatic access

Return value

The useCheckbox hook returns an object with these keys:

Key	Description
`plumeProps`	Props to spread onto your `Plasmic*` component
`state`	`ToggleState` as returned by `useToggleState`

Plume Config

Key	Description	Required?
`isSelectedVariant`	Variant to activate when the Checkbox is checked, according to `props.isSelected`	Required
`isIndeterminateVariant`	Variant to activate when the Checkbox is “indeterminate”, according to `props.isIndeterminate`	Optional, if you don’t want to support “indeterminate” case
`isDisabledVariant`	Variant to activate when the Button is disabled, according to `props.isDisabled`	Recommended
`hasLabelVariant`	Variant to activate when the Checkbox has a text label, specified as `props.children`.	Recommended; a checkbox without label is not accessible
`labelSlot`	Slot name for the Checkbox label; will be filled with `props.children`	Recommended
`root`	Name 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.