---
title: ToggleButton
description: >-
  Options inside a
  [ToggleButtonGroup](/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup).
api_version: 2024-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebutton
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebutton.md
---

# Toggle​Button

Options inside a [ToggleButtonGroup](https://shopify.dev/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup).

## ToggleButtonProps

* **id**

  **string**

  **required**

  A unique identifier for the toggle button.

* **accessibilityLabel**

  **string**

  A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.

* **disabled**

  **boolean**

  Disables the button, disallowing any interaction.

* **onPress**

  **() => void**

  Callback when button is pressed.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2024-01/togglebutton-default-CZovWOKw.png)

### Examples

* #### Basic ToggleButton

  ##### React

  ```tsx
  import {
    reactExtension,
    ToggleButton,
    ToggleButtonGroup,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <ToggleButtonGroup
        value="none"
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <ToggleButton id="none">None</ToggleButton>
      </ToggleButtonGroup>
    );
  }
  ```

  ##### JS

  ```js
  import {
    extension,
    ToggleButtonGroup,
    ToggleButton,
  } from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const toggleButtonGroup = root.createComponent(
      ToggleButtonGroup,
      {
        value: 'none',
        onChange: (value) => {
          console.log(`onChange event with value: ${value}`);
        },
      },
      [root.createComponent(ToggleButton, {id: 'none'}, 'None')],
    );

    root.appendChild(toggleButtonGroup);
  });
  ```

## Related

[Component - ToggleButtonGroup](togglebuttongroup)