---
title: Checkbox
description: >-
  Checkboxes are most commonly used to give merchants a way to make a range of
  selections (zero, one, or multiple).
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/checkbox
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/checkbox.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/checkbox.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/checkbox.md#guidelines)

# Checkbox

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

Checkboxes are most commonly used to give merchants a way to make a range of selections (zero, one, or multiple).

##### JavaScript

```ts
import {extend, ExtensionPoint, Checkbox} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const checkbox = root.createComponent(Checkbox, {
    label: 'Opt in to something cool',
    checked: true,
    onChange: () => console.log('Checked'),
  });

  root.appendChild(checkbox);

  root.mount();
});
```

##### React

```jsx
import React from 'react';
import {extend, render, ExtensionPoint, Checkbox} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Checkbox label="Opt in to something cool" checked onChange={() => console.log('Checked')} />
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| label? | `string` | Label for the checkbox. |
| checked? | `boolean` | Checkbox is selected. |
| value? | `boolean` | Alias for `checked`, to support iterating over multiple types of form fields. If both `checked` and `value` are used, `checked` is the source of truth. |
| onChange? | `(value: boolean) => void \| Promise<void>` | Callback when checkbox is toggled. |

***

## Guidelines

| ✅ Do | 🛑 Don't |
| - | - |
| Use Checkboxes to give merchants a multi select choice | Horizontally stack Checkboxes |
| Vertically align Checkboxes | |

For more guidelines, refer to Polaris' [Checkbox best practices](https://polaris.shopify.com/components/selection-and-input/checkbox#best-practices).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/checkbox.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/checkbox.md#guidelines)