---
title: Checkbox
description: The checkbox component provides a way for customers to make binary selections.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/checkbox
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/checkbox.md
---
Migrate to Polaris
Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.
# Checkbox
The checkbox component provides a clear way for customers to make selections, such as agreeing to terms, enabling settings, or choosing multiple items from a list. Use checkbox to create binary on/off controls or multi-select interfaces where customers can select any combination of options.
Checkboxes support labels, help text, error states, and an indeterminate state for grouped selections. For settings that take effect immediately, use [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/switch) instead.
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.profile.payment.render-after
#### Use cases
* **Marketing opt-in**: Let customers subscribe to email or SMS updates.
* **Terms acceptance**: Require agreement to terms and conditions before continuing.
* **Add-on selection**: Offer optional extras like gift wrapping or insurance.
* **Embedded links**: Include links to policies or details within checkbox labels.
***
## Properties
Configure the following properties on the Checkbox component.
* **accessibilityLabel**
**string**
A label used for users of assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
* **checked**
**boolean**
Whether the checkbox is active.
* **disabled**
**boolean**
Whether the checkbox is disabled, preventing any user interaction.
* **error**
**string**
An error message displayed below the field to indicate validation problems. When set, the field is styled with error indicators.
* **id**
**string**
A unique identifier for the field. When no `id` is set, a globally unique value will be used instead.
* **name**
**string**
An identifier for the field that is unique within the nearest containing `Form` component.
* **onChange**
**(value: boolean) => void**
A callback fired when the checkbox value changes. This callback is called with a boolean indicating whether the checkbox should now be active or inactive. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `checked` or `value` props.
* **toggles**
**string**
The ID of the component whose visibility will be toggled when this component is activated. Use this to show or hide related content like a disclosure panel.
* **value**
**boolean**
Whether the checkbox is active. This prop is an alias for `checked`, and can be useful in form libraries that provide a normalized API for dealing with both `boolean` and `string` values. If both `value` and `checked` are set, `checked` takes precedence.
***
## Examples
### Opt in to marketing
Use checkbox to let customers make a binary selection like subscribing to updates. This example shows a basic marketing opt-in checkbox.
## Opt in to marketing
## Opt in to marketing
##### React
```tsx
import {
reactExtension,
Checkbox,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
Save this information for next time
);
}
```
##### JS
```js
import {extension, Checkbox} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const checkbox = root.createComponent(
Checkbox,
{id: 'checkbox', name: 'checkbox'},
'Save this information for next time',
);
root.appendChild(checkbox);
});
```
### Embed links in a checkbox label
To provide customers with additional information or references, include link components within checkbox labels. This gives customers easy access to relevant content like terms of service or privacy policies.
## Embed links in a checkbox label
## Embed links in a checkbox label
##### React
```tsx
import {
reactExtension,
Checkbox,
Link,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => ,
);
export const CheckBoxLinks = () => {
return (
I agree to the{' '}
terms and conditions
{' '}
and{' '}
privacy policy
{' '}
of the store related to pricing, payment,
shipping, returns, and liability set forth
by Ride Sports
);
};
```
##### JavaScript
```js
import {
extension,
Checkbox,
Link,
} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root) => {
const checkbox = root.createComponent(
Checkbox,
{
id: 'checkbox1',
name: 'checkboxchoices',
},
[
' I agree to the ',
root.createComponent(
Link,
{to: 'https://www.shopify.com'},
'terms and conditions',
),
' and ',
root.createComponent(
Link,
{to: 'https://www.shopify.com'},
'privacy policy',
),
' of the store related to pricing, payment, shipping, returns, and liability set forth by Ride Sports.',
],
);
root.appendChild(checkbox);
},
);
```
***
## Best practices
* **Write descriptive labels**: Use clear, specific text that explains what the customer is agreeing to or selecting.
* **Pre-check thoughtfully**: Only use `defaultChecked` for options that benefit the customer. Don't pre-check options that add cost.
* **Show validation errors inline**: Use the `error` property to display messages directly below the checkbox for required fields.
* **Pair with forms**: Use checkboxes inside a [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/form) when selections need to be submitted together with other input.
***
## Limitations
* The `required` attribute doesn't trigger automatic validation.
***