Checkbox

Checkboxes are used to give buyers a binary option. They are commonly used to present terms and conditions.

Unlike most field components, any children passed to this component will be used as the label for the checkbox.

Anchor to ExampleExample

import {extend, Checkbox} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const checkbox = root.createComponent(

Checkbox,

{id: 'checkbox', name: 'checkbox'},

'Save this information for next time',

);

root.appendChild(checkbox);

});

import {render, Checkbox} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return (

Save this information for next time

</Checkbox>

);

}

import {extend, Checkbox} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const checkbox = root.createComponent(
    Checkbox,
    {id: 'checkbox', name: 'checkbox'},
    'Save this information for next time',
  );

  root.appendChild(checkbox);
});

import {render, Checkbox} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

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

Anchor to PropsProps

optional = ?

Name	Type	Description
id?	`string`	A unique identifier for the field. When no `id` is provided, a globally unique value will be used instead.
name?	`string`	An identifier for the field that is unique within the nearest containing `<Form />` component.
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 provided, `checked` takes precedence.
checked?	`boolean`	Whether the checkbox is active.
disabled?	`boolean`	Whether the checkbox can be changed.
error?	`string`	An error label to present with the field.
accessibilityLabel?	`string`	A label to use for the field that will be used for buyers using assistive technologies. When provided, any `children` supplied to this component are hidden from being seen for accessibility purposes to prevent duplicate content from being read.
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 Best practicesBest practices

Be framed positively: for example, Turn on notifications instead of Turn off notifications.
Be aware of any legal issues around checkboxes - for example, to comply with GDPR, marketing sign-up checkboxes should always be deselected by default.
Link to more information or include a subtitle as required to provide more explanation. Don't rely on tooltips to explain a checkbox.

Was this page helpful?