---
title: Choice
description: >-
  Options inside a `ChoiceList`.


  The wrapping `ChoiceList` component will dictate if the choice renders as
  radio buttons or checkboxes.
api_version: 2025-01
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/forms/choice
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/forms/choice.md
---

# Choice

Options inside a `ChoiceList`.

The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes.

## ChoiceProps

* **id**

  **string**

  **required**

  A unique identifier for the choice.

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

* **details**

  **string | RemoteFragment**

  Additional content to be revealed when selected.

* **disabled**

  **boolean**

  Whether the choice can be changed.

* **primaryContent**

  **string | RemoteFragment**

  The primary content for a choice. Rendered below `<label>`.

* **secondaryContent**

  **string | RemoteFragment**

  The secondary label content for a choice in a `group` ChoiceList. Ignored in `base` [variant](https://shopify.dev/docs/api/checkout-ui-extensions/components/forms/choicelist#choicelistprops-propertydetail-value). Rendered on the opposite side to

* **tertiaryContent**

  **string | RemoteFragment**

  The tertiary label content for a choice in a `group` ChoiceList. Ignored in `base` [variant](https://shopify.dev/docs/api/checkout-ui-extensions/components/forms/choicelist#choicelistprops-propertydetail-value). Rendered below `primaryContent` and `secondaryContent`.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/choice-default-CgBZJC7w.png)

### Examples

* #### Basic Choice

  ##### React

  ```tsx
  import {
    reactExtension,
    Choice,
    ChoiceList,
    InlineStack,
  } from '@shopify/ui-extensions-react/checkout';

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

  function Extension() {
    return (
      <InlineStack>
        <ChoiceList
          name="ship"
          value="ship-1"
          onChange={(value) => {
            console.log(
              `onChange event with value: ${value}`,
            );
          }}
        >
          <Choice id="ship-1">Ship</Choice>
        </ChoiceList>

        <ChoiceList
          name="gift"
          value={['gift-1']}
          onChange={(value) => {
            console.log(
              `onChange event with value: ${value}`,
            );
          }}
        >
          <Choice id="multipleFirst">
            Gift message
          </Choice>
        </ChoiceList>
      </InlineStack>
    );
  }
  ```

  ##### JS

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

  export default extension('purchase.checkout.block.render', (root) => {
    const choiceList = root.createComponent(
      ChoiceList,
      {
        name: 'ship',
        value: 'ship-1',
        onChange: (value) => {
          console.log(`onChange event with value: ${value}`);
        },
      },
      [root.createComponent(Choice, {id: 'ship-1'}, 'Ship')],
    );

    const multipleChoiceList = root.createComponent(
      ChoiceList,
      {
        name: 'gift',
        value: ['gift-1'],
        onChange: (value) => {
          console.log(`onChange event with value: ${value}`);
        },
      },
      [root.createComponent(Choice, {id: 'gift-1'}, 'Gift message')],
    );

    const layout = root.createComponent(InlineStack, undefined, [
      choiceList,
      multipleChoiceList,
    ]);

    root.appendChild(layout);
  });
  ```

## Best Practices

* Include a title that either tells customers what to do or explains their available options.

* Label options clearly based on what the option will do.

* Avoid options that contradict each other when you’re allowing for multiple selections.

## Related

[Component - ChoiceList](choicelist)