---
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-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choice
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choice.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# Choice

Options inside a `ChoiceList`.

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

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## 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/2025-07/choice-default-CgBZJC7w.png)

### Examples

* #### Basic Choice

  ##### React

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

  export default reactExtension(
    'customer-account.page.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/customer-account';

  export default extension('customer-account.page.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)