> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: ec04666e-4243-4af6-aab5-75fb7a25c6a6
---

# Toggle

> Learn about the Toggle component for use in UI extensions.

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

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/toggle-example.png" alt="toggle-example" />
</Frame>

```jsx theme={null}
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.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/toggledisplay-examples.png" alt="toggledisplay-examples" />
</Frame>

* `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.

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/toggle-size-exaples.png" alt="toggle-size-examples" />
</Frame>

## Related components

* [Tag](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag)
* [ToggleGroup](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group)
* [ProgressBar](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/progress-bar)