> ## 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.

![toggle-example](https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/toggle-example.png)

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

![toggledisplay-examples](https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/toggledisplay-examples.png)

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

![toggle-size-examples](https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/toggle-size-exaples.png)

## Related components

* [Tag](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/tag.md)
* [ToggleGroup](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle-group.md)
* [ProgressBar](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/progress-bar.md)