Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Checkbox

Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions.

Support
Targets (50)

Supported targets

  • Checkout::Actions::RenderBefore
  • Checkout::CartLineDetails::RenderAfter
  • Checkout::CartLines::RenderAfter
  • Checkout::Contact::RenderAfter
  • Checkout::CustomerInformation::RenderAfter
  • Checkout::DeliveryAddress::RenderBefore
  • Checkout::Dynamic::Render
  • Checkout::PickupLocations::RenderAfter
  • Checkout::PickupLocations::RenderBefore
  • Checkout::PickupPoints::RenderAfter
  • Checkout::PickupPoints::RenderBefore
  • Checkout::Reductions::RenderAfter
  • Checkout::Reductions::RenderBefore
  • Checkout::ShippingMethodDetails::RenderAfter
  • Checkout::ShippingMethodDetails::RenderExpanded
  • Checkout::ShippingMethods::RenderAfter
  • Checkout::ShippingMethods::RenderBefore
  • Checkout::ThankYou::CartLineDetails::RenderAfter
  • Checkout::ThankYou::CartLines::RenderAfter
  • Checkout::ThankYou::CustomerInformation::RenderAfter
  • Checkout::ThankYou::Dynamic::Render
  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to accessibilityLabel
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.

Anchor to checked
checked
boolean

Whether the checkbox is active.

Anchor to disabled
disabled
boolean

Whether the checkbox can be changed.

Anchor to error
error
string

Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

string

A unique identifier for the field. When no id is set, a globally unique value will be used instead.

string

An identifier for the field that is unique within the nearest containing Form component.

Anchor to onChange
onChange
(value: boolean) => void

A callback that is run whenever the checkbox is changed. This callback is called with a boolean indicating whether the checkbox should now be active or inactive. This component is controlled, so you must store this value in state and reflect it back in the checked or value props.

Anchor to toggles
toggles
string

The component's identifier whose visibility will be toggled when this component is actioned.

Anchor to value
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
import {
reactExtension,
Checkbox,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
return (
<Checkbox id="checkbox" name="checkbox">
Save this information for next time
</Checkbox>
);
}

Preview

Was this page helpful?