# ToggleButton

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

```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
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);
});

```

## ToggleButtonProps

### ToggleButtonProps

### accessibilityLabel

value: `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

value: `boolean`

Disables the button, disallowing any interaction.

### id

value: `string`

A unique identifier for the toggle button.

### onPress

value: `() => void`

Callback when button is pressed.

## Related

- [ToggleButtonGroup](togglebuttongroup)