Although the Shopify Checkout UI Extension Checkbox component is explicitly documented to be controlled, it appears to exhibit uncontrolled behavior.
For instance, even with the following code, the check mark toggles when clicked:
import { Checkbox } from '@shopify/ui-extensions-react/checkout';
import React from 'react';
export const AppCheckbox = () => (
<Checkbox id="test" checked={false} onChange={(v) => console.log(v)}>
checkbox
</Checkbox>
);
Version: 2025-01
Target: purchase.checkout.delivery-address.render-after
What I want to achieve is to display a modal for confirmation when the checkbox is clicked, and only then update the checked state. Therefore, this component needs to be controlled.
Does anyone know more about this behavior?