# Checkbox

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

```tsx
import {render, Checkbox} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <Extension />);

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

```

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

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

  root.appendChild(checkbox);
});

```

## CheckboxProps

### CheckboxProps

### 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.

### 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.

### 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.

## Examples

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


To provide buyers with additional information or references, couple it with link components seamlessly within checkbox components. This can be done by including links as part of the checkbox label in the checkbox. This will provide an easy way to access relevant content that buyers may need.

```jsx
import React from 'react';
import {
  render,
  Checkbox,
  Link,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => (
  <CheckBoxLinks />
));

export const CheckBoxLinks = () => {
  return (
    <Checkbox
      id="checkbox1"
      name="checkboxchoices"
    >
      I agree to the{' '}
      <Link to="https://www.shopify.com">
        terms and conditions
      </Link>{' '}
      and{' '}
      <Link to="https://www.shopify.com">
        privacy policy
      </Link>{' '}
      of the store related to pricing, payment,
      shipping, returns, and liability set forth
      by Ride Sports
    </Checkbox>
  );
};

```

```js
import {
  extend,
  Checkbox,
  Link,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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);
});

```

## Examples

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


To provide buyers with additional information or references, couple it with link components seamlessly within checkbox components. This can be done by including links as part of the checkbox label in the checkbox. This will provide an easy way to access relevant content that buyers may need.

```jsx
import React from 'react';
import {
  render,
  Checkbox,
  Link,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => (
  <CheckBoxLinks />
));

export const CheckBoxLinks = () => {
  return (
    <Checkbox
      id="checkbox1"
      name="checkboxchoices"
    >
      I agree to the{' '}
      <Link to="https://www.shopify.com">
        terms and conditions
      </Link>{' '}
      and{' '}
      <Link to="https://www.shopify.com">
        privacy policy
      </Link>{' '}
      of the store related to pricing, payment,
      shipping, returns, and liability set forth
      by Ride Sports
    </Checkbox>
  );
};

```

```js
import {
  extend,
  Checkbox,
  Link,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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);
});

```