# ConsentCheckbox

Use buyer consent checkboxes for collecting the buyer's approval for a given policy.

```tsx
import React from 'react';
import {
  reactExtension,
  ConsentCheckbox,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <ConsentCheckbox policy="sms-marketing">
      Text me with news and offers
    </ConsentCheckbox>
  );
}

```

```js
import {extension, ConsentCheckbox} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const consentCheckbox = root.createComponent(
    ConsentCheckbox,
    {policy: 'sms-marketing'},
    'Text me with news and promotions',
  );

  root.appendChild(consentCheckbox);
});

```

## ConsentCheckboxProps

### ConsentCheckboxProps

### policy

value: `"sms-marketing"`

The policy for which buyer consent is being collected for.

`sms-marketing`: Represents the policy for SMS marketing consent.

### id

value: `string`

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

### name

value: `string`

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

### checked

value: `boolean`

Whether the checkbox is active.

### disabled

value: `boolean`

Whether the checkbox can be changed.

### error

value: `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.

### accessibilityLabel

value: `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.

### onChange

value: `(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](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

value: `string`

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

## Related

- [ConsentCheckbox](consent-checkbox)

## Examples

Use buyer consent checkboxes for collecting the buyer's approval for a given policy.



```tsx
import React from 'react';
import {
  reactExtension,
  BlockStack,
  ConsentCheckbox,
  ConsentPhoneField,
  InlineStack,
  InlineSpacer,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <BlockStack>
      <ConsentCheckbox policy="sms-marketing">
        Text me with news and offers
      </ConsentCheckbox>
      <InlineStack
        inlineAlignment="start"
        padding={[
          'none',
          'none',
          'none',
          'tight',
        ]}
      >
        <InlineSpacer spacing="extraTight" />
        <ConsentPhoneField
          label="Phone"
          policy="sms-marketing"
        />
      </InlineStack>
    </BlockStack>
  );
}

```

```js
import {
  extension,
  BlockStack,
  ConsentCheckbox,
  ConsentPhoneField,
  InlineStack,
  InlineSpacer,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const consentCheckbox = root.createComponent(
    ConsentCheckbox,
    {
      policy: 'sms-marketing',
    },
    'Text me with news and offers',
  );

  const inlineSpacer = root.createComponent(InlineSpacer, {
    spacing: 'extraTight',
  });

  const consentPhoneField = root.createComponent(ConsentPhoneField, {
    label: 'Phone',
    policy: 'sms-marketing',
  });

  const inlineStack = root.createComponent(
    InlineStack,
    {
      inlineAlignment: 'start',
      padding: ['none', 'none', 'none', 'tight'],
    },
    [inlineSpacer, consentPhoneField],
  );

  const layout = root.createComponent(BlockStack, undefined, [
    consentCheckbox,
    inlineStack,
  ]);

  root.appendChild(layout);
});

```

## Examples

Use buyer consent checkboxes for collecting the buyer's approval for a given policy.



```tsx
import React from 'react';
import {
  reactExtension,
  BlockStack,
  ConsentCheckbox,
  ConsentPhoneField,
  InlineStack,
  InlineSpacer,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <BlockStack>
      <ConsentCheckbox policy="sms-marketing">
        Text me with news and offers
      </ConsentCheckbox>
      <InlineStack
        inlineAlignment="start"
        padding={[
          'none',
          'none',
          'none',
          'tight',
        ]}
      >
        <InlineSpacer spacing="extraTight" />
        <ConsentPhoneField
          label="Phone"
          policy="sms-marketing"
        />
      </InlineStack>
    </BlockStack>
  );
}

```

```js
import {
  extension,
  BlockStack,
  ConsentCheckbox,
  ConsentPhoneField,
  InlineStack,
  InlineSpacer,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const consentCheckbox = root.createComponent(
    ConsentCheckbox,
    {
      policy: 'sms-marketing',
    },
    'Text me with news and offers',
  );

  const inlineSpacer = root.createComponent(InlineSpacer, {
    spacing: 'extraTight',
  });

  const consentPhoneField = root.createComponent(ConsentPhoneField, {
    label: 'Phone',
    policy: 'sms-marketing',
  });

  const inlineStack = root.createComponent(
    InlineStack,
    {
      inlineAlignment: 'start',
      padding: ['none', 'none', 'none', 'tight'],
    },
    [inlineSpacer, consentPhoneField],
  );

  const layout = root.createComponent(BlockStack, undefined, [
    consentCheckbox,
    inlineStack,
  ]);

  root.appendChild(layout);
});

```