Last modified: August 22, 2025
The Checkbox component renders single checkbox input. If you want to display multiple checkboxes, you should use ToggleGroup instead, as it comes with extra logic for handling multiple checkboxes and radio buttons.
ui-extensions-component-checkbox
import { Checkbox } from '@hubspot/ui-extensions';

const Extension = () => {
  return (
    <Checkbox
      checked={isSuperAdmin}
      name="adminCheck"
      description="Select to grant superpowers"
    >
      Super Admin
</Checkbox>
  );
};
PropTypeDescription
valueStringThe checkbox value. This value is not displayed on the card, but is passed on the server side when submitted, along with the checkbox name.
nameStringThe checkbox’s unique identifier.
checkedBooleanWhen set to true, the checkbox is selected. Default is false.
initialIsCheckedBooleanWhen set to true, the checkbox is selected by default. Default is false.
readOnlyBooleanWhen set to true, the checkbox cannot be selected.
descriptionStringText that describes the field’s purpose.
aria-labelStringThe checkbox’s accessibility label.
variant'sm', 'small' | 'default'The size of the checkbox
inlineBooleanWhen set to true, arranges checkboxes side by side. Default is false.
onChange(checked: boolean, value: string) => voidA callback function that is called when the checkbox is selected or cleared. Passes the new value.