Checkbox | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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> ); };
Prop Type Description
value  String The checkbox value. This value is not displayed on the card, but is passed on the server side when submitted, along with the checkbox name.
name  String The checkbox's unique identifier.
checked  Boolean When set to true, the checkbox is selected. Default is false.
initialIsChecked  Boolean When set to true, the checkbox is selected by default. Default is false.
readonly Boolean When set to true, the checkbox cannot be selected.
description String Text that describes the field's purpose.
aria-label String The checkbox's accessibility label.
variant 'sm', 'small' | 'default' The size of the checkbox
inline Boolean When set to true, arranges checkboxes side by side. Default is false.
onChange (checked: boolean, value: string) => void; A callback function that is called when the checkbox is selected or cleared. Passes the new value.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.