Checkbox

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

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

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();

});

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 />),

);

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

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 />),
);

Anchor to PropsProps

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.

Anchor to GuidelinesGuidelines

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

Was this page helpful?