Toggle | UI components (BETA)

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

The Toggle component renders a boolean toggle switch that can be configured with sizing, label position, read-only, and more.

toggle-example

import { Toggle } from '@hubspot/ui-extensions'; const Extension = () => { return ( <Toggle size="md" label="My toggle" labelDisplay="top" initialIsChecked={true} /> ); };
Prop Type Description
name Required String The input's unique identifier.
label Required String The text that displays above the input.
size 'xs', 'extra-small' | 'sm', 'small' | 'md', 'medium' (default) The size of the toggle. Only 'md' / 'medium' sized toggles can display text on the toggle (ON, OFF). All other sizes will hide checked/unchecked text.
labelDisplay 'inline' (default) | 'top' | 'hidden' The display option for the toggle label.
checked Boolean Whether the toggle is selected. Default is false.
initialIsChecked Boolean When set to true, the toggle will be selected by default. Sets the default checked state when the component is uncontrolled.
textChecked String The text that displays on the toggle when checked. Default is ON. Extra small and small toggles will not display any text.
textUnchecked String The text that displays on the toggle when not checked. Default is OFF. Extra small and small toggles will not display any text.
readonly Boolean When set to true, users will not be able to select the toggle. Default is false.
onChange (checked: boolean) => void A function that is invoked when the toggle is clicked.

Variants

Using the labelDisplay and size props, you can customize toggle appearance.

  • labelDisplay:  set to 'inline' or 'top' to configure the label position, or set to 'hidden' to hide the label.
    toggledisplay-examples
  • size: by default, toggles are set to 'medium'. Shrink the toggle size by setting this prop to 'xs'/'extra-small' or 'sm'/'small'. Note that only medium toggles will display ON/OFF status text.
    toggle-size-exaples

Related components

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