Choose a version:

Choice

Options inside a ChoiceList.

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

Anchor to choicepropsChoiceProps

Anchor to id id string required: A unique identifier for the choice.
Anchor to accessibilityLabel 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.
Anchor to details details string | RemoteFragment: Additional content to be revealed when selected.
Anchor to disabled disabled boolean: Whether the choice can be changed.
Anchor to primaryContent primaryContent string | RemoteFragment: The primary content for a choice. Rendered below <label>.
Anchor to secondaryContent secondaryContent string | RemoteFragment: The secondary label content for a choice in a group ChoiceList. Ignored in base variant. Rendered on the opposite side to and primaryContent.
Anchor to tertiaryContent tertiaryContent string | RemoteFragment: The tertiary label content for a choice in a group ChoiceList. Ignored in base variant. Rendered below primaryContent and secondaryContent.

ChoiceProps

accessibilityLabel
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
```
string
```
details
Additional content to be revealed when selected.
```
string | RemoteFragment
```
disabled
Whether the choice can be changed.
```
boolean
```
id
A unique identifier for the choice.
```
string
```
primaryContent
The primary content for a choice. Rendered below `<label>`.
```
string | RemoteFragment
```
secondaryContent
The secondary label content for a choice in a `group` ChoiceList. Ignored in `base` [variant](/docs/api/checkout-ui-extensions/components/forms/choicelist#choicelistprops-propertydetail-value). Rendered on the opposite side to <label> and `primaryContent`.
```
string | RemoteFragment
```
tertiaryContent
The tertiary label content for a choice in a `group` ChoiceList. Ignored in `base` [variant](/docs/api/checkout-ui-extensions/components/forms/choicelist#choicelistprops-propertydetail-value). Rendered below `primaryContent` and `secondaryContent`.
```
string | RemoteFragment
```

export interface ChoiceProps {
  /**
   * A unique identifier for the choice.
   */
  id: string;
  /**
   * Whether the choice can be changed.
   */
  disabled?: boolean;
  /**
   * A label used for buyers using assistive technologies. When set, any
   * `children` supplied to this component will not be announced to screen reader users.
   */
  accessibilityLabel?: string;
  /**
   * Additional content to be revealed when selected.
   */
  details?: string | RemoteFragment;
  /**
   * The primary content for a choice.
   * Rendered below `<label>`.
   */
  primaryContent?: string | RemoteFragment;
  /**
   * The secondary label content for a choice in a `group` ChoiceList.
   * Ignored in `base` [variant](/docs/api/checkout-ui-extensions/components/forms/choicelist#choicelistprops-propertydetail-value).
   * Rendered on the opposite side to <label> and `primaryContent`.
   */
  secondaryContent?: string | RemoteFragment;
  /**
   * The tertiary label content for a choice in a `group` ChoiceList.
   * Ignored in `base` [variant](/docs/api/checkout-ui-extensions/components/forms/choicelist#choicelistprops-propertydetail-value).
   * Rendered below `primaryContent` and `secondaryContent`.
   */
  tertiaryContent?: string | RemoteFragment;
}

Was this section helpful?

Basic Choice

import {

reactExtension,

Choice,

ChoiceList,

InlineStack,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

<ChoiceList

name="ship"

value="ship-1"

onChange={(value) => {

console.log(

`onChange event with value: ${value}`,

);

}}

</ChoiceList>

<ChoiceList

name="gift"

value={['gift-1']}

onChange={(value) => {

console.log(

`onChange event with value: ${value}`,

);

}}

Gift message

</Choice>

</ChoiceList>

</InlineStack>

);

}

examples

Basic Choice

React

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

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

Anchor to best-practicesBest 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.

Was this section helpful?

Anchor to relatedRelated

ComponentChoiceList