---
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/2025-01/components/forms/choice
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/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

* #### 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);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-01/choice-default.png)

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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/choicelist)

[ComponentChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/choicelist)