Toggle - HubSpot docs

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

import { Toggle } from "@hubspot/ui-extensions";

const Extension = () => {
  return <Toggle size="md" label="My toggle" labelDisplay="top" initialIsChecked={true} />;
};

Props

Prop	Type	Description
`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.
`label`	String	The text that displays above the input.
`labelDisplay`	`'inline'` (default) \| `'top'` \| `'hidden'`	The display option for the toggle label.
`name`	String	The input’s unique identifier.
`onChange`	`(checked: boolean) => void`	A function that is invoked when the toggle is clicked.
`readonly`	Boolean	When set to `true`, users will not be able to select the toggle. Default is `false`.
`size`	`'xs'` \|`'sm'` \| `'md'` (default)	The size of the toggle. Only `'md'` sized toggles can display text on the toggle (ON, OFF). All other sizes will hide checked/unchecked text.
`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.

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.

size: by default, toggles are set to 'md'. Shrink the toggle size by setting this prop to 'xs' or 'sm'. Note that only medium toggles will display ON/OFF status text.

​Props

​Variants

​Related components

Props

Variants

Related components