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.