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 disabled disabled boolean: Whether the choice can be changed.
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.

ChoiceProps

id
A unique identifier for the choice.
```
string
```
disabled
Whether the choice can be changed.
```
boolean
```
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
```

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;
}

Was this section helpful?

Basic Choice

import {

render,

ChoiceList,

Choice,

BlockStack,

InlineStack,

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

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

function Extension() {

return (

<ChoiceList

name="choice"

value="first"

onChange={(value) => {

console.log(`onChange event with value: ${value}`);

}}

<Choice id="second">Pickup</Choice>

</BlockStack>

</ChoiceList>

<ChoiceList

name="choiceMultiple"

value={['multipleFirst']}

onChange={(value) => {

console.log(`onChange event with value: ${value}`);

}}

<Choice id="multipleFirst">Gift message</Choice>

<Choice id="multipleSecond">Gift wrapping</Choice>

</BlockStack>

</ChoiceList>

</InlineStack>

);

}

examples

Basic Choice

React

import {
  render,
  ChoiceList,
  Choice,
  BlockStack,
  InlineStack,
} from '@shopify/checkout-ui-extensions-react';

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

function Extension() {
  return (
    <InlineStack>
      <ChoiceList
        name="choice"
        value="first"
        onChange={(value) => {
          console.log(`onChange event with value: ${value}`);
        }}
      >
        <BlockStack>
          <Choice id="first">Ship</Choice>
          <Choice id="second">Pickup</Choice>
        </BlockStack>
      </ChoiceList>

      <ChoiceList
        name="choiceMultiple"
        value={['multipleFirst']}
        onChange={(value) => {
          console.log(`onChange event with value: ${value}`);
        }}
      >
        <BlockStack>
          <Choice id="multipleFirst">Gift message</Choice>
          <Choice id="multipleSecond">Gift wrapping</Choice>
        </BlockStack>
      </ChoiceList>
    </InlineStack>
  );
}

JS

import {
  extend,
  ChoiceList,
  Choice,
  BlockStack,
  InlineStack,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const choiceList = root.createComponent(
    ChoiceList,
    {
      name: 'choice',
      value: 'first',
      onChange: (value) => {
        console.log(`onChange event with value: ${value}`);
      },
    },
    [
      root.createComponent(BlockStack, undefined, [
        root.createComponent(Choice, {id: 'first'}, 'Ship'),
        root.createComponent(Choice, {id: 'second'}, 'Pickup'),
      ]),
    ],
  );

  const multipleChoiceList = root.createComponent(
    ChoiceList,
    {
      name: 'multipleChoice',
      value: ['multipleFirst'],
      onChange: (value) => {
        console.log(`onChange event with value: ${value}`);
      },
    },
    [
      root.createComponent(BlockStack, undefined, [
        root.createComponent(Choice, {id: 'multipleFirst'}, 'Gift message'),
        root.createComponent(Choice, {id: 'multipleSecond'}, 'Gift wrapping'),
      ]),
    ],
  );

  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