# ChoiceList

Use choice lists to present a list of choices where buyers can make a single selection or multiple selections.

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

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

function Extension() {
  return (
    <InlineStack>
      <ChoiceList
        name="group-single"
        variant="group"
        value="ship"
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <Choice
          secondaryContent={
            <Icon source="truck" />
          }
          id="ship"
        >
          Ship
        </Choice>
        <Choice
          secondaryContent={
            <Icon source="marker" />
          }
          id="ship-to-pickup-point"
        >
          Ship to pickup point
        </Choice>
        <Choice
          secondaryContent={
            <Icon source="store" />
          }
          id="pick-up"
        >
          Pick up in store
        </Choice>
      </ChoiceList>
      <ChoiceList
        name="base-multiple"
        value={['remember-me']}
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <BlockStack>
          <Choice id="remember-me">
            Save this information for next time
          </Choice>
          <Choice id="email-me">
            Email me with news and offers
          </Choice>
          <Choice id="text-me">
            Text me with news and offers
          </Choice>
        </BlockStack>
      </ChoiceList>
    </InlineStack>
  );
}

```

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

export default extension('purchase.checkout.block.render', (root) => {
  const inlineStack = root.createComponent(InlineStack, undefined, [
    root.createComponent(
      ChoiceList,
      {
        name: 'group-single',
        variant: 'group',
        value: 'ship',
        onChange: (value) => {
          console.log(`onChange event with value: ${value}`);
        },
      },
      [
        root.createComponent(
          Choice,
          {
            secondaryContent: root.createComponent(Icon, {source: 'truck'}),
            id: 'ship',
          },
          'Ship',
        ),
        root.createComponent(
          Choice,
          {
            secondaryContent: root.createComponent(Icon, {source: 'marker'}),
            id: 'ship-to-pickup-point',
          },
          'Ship to pickup point',
        ),
        root.createComponent(
          Choice,
          {
            secondaryContent: root.createComponent(Icon, {source: 'store'}),
            id: 'pick-up',
          },
          'Pick up in store',
        ),
      ],
    ),
    root.createComponent(
      ChoiceList,
      {
        name: 'base-multiple',
        value: ['remember-me'],
        onChange: (value) => {
          console.log(`onChange event with value: ${value}`);
        },
      },
      [
        root.createComponent(BlockStack, undefined, [
          root.createComponent(
            Choice,
            {id: 'remember-me'},
            'Save this information for next time',
          ),
          root.createComponent(
            Choice,
            {id: 'email-me'},
            'Email me with news and offers',
          ),
          root.createComponent(
            Choice,
            {id: 'text-me'},
            'Text me with news and offers',
          ),
        ]),
      ],
    ),
  ]);

  root.appendChild(inlineStack);
});

```

## ChoiceListProps

### ChoiceListProps

### name

value: `string`

A unique identifier for the field in the closest `Form` component.

### onChange

value: `(value: T) => void`

A callback that is run whenever the choice list is changed. This callback is called with a string or array of strings indicating the ids of choices that should now be selected. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `value` prop.

### value

value: `T`

A `string` or `string[]` indicating the ids of selected choices. **When a string is set, choices render as radios. When a string array is set, choices render as checkboxes**.

### variant

value: `'base' | 'group'`

Toggle between `base` and `group` look.

Check the [best practices](#best-practices) to learn more about the variants.

## Related

- [Choice](choice)
- [Checkbox](checkbox)

## Examples

Use choice lists to present a list of choices where buyers can make a single selection or multiple selections.


The base variant’s flexibility allows for the creation of Likert scales using the ChoiceList component. By utilizing layout components, you can easily structure rows and columns for this purpose.

```jsx
import {
  reactExtension,
  Choice,
  ChoiceList,
  Grid,
  TextBlock,
  View,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Grid
      columns={[
        'fill',
        '13%',
        '13%',
        '13%',
        '13%',
        '13%',
      ]}
      rows="auto"
      spacing="none"
      border="base"
      cornerRadius="base"
      overflow="hidden"
    >
      <View />
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Strongly disagree
        </TextBlock>
      </View>
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Disagree
        </TextBlock>
      </View>
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Neutral
        </TextBlock>
      </View>
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Agree
        </TextBlock>
      </View>
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Strongly agree
        </TextBlock>
      </View>

      <ChoiceList
        name="question1"
        value=""
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <View
          background="subdued"
          padding="base"
          blockAlignment="center"
        >
          <TextBlock>
            I recommend Plant to others.
          </TextBlock>
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-1"
            accessibilityLabel="Strongly disagree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-2"
            accessibilityLabel="Disagree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-3"
            accessibilityLabel="Neutral"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-4"
            accessibilityLabel="Agree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-5"
            accessibilityLabel="Strongly agree"
          />
        </View>
      </ChoiceList>

      <ChoiceList
        name="question2"
        value=""
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <View
          padding="base"
          blockAlignment="center"
        >
          <TextBlock>
            I have had a positive experience
            purchasing from Plant.
          </TextBlock>
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-1"
            accessibilityLabel="Strongly disagree"
          />
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-2"
            accessibilityLabel="Disagree"
          />
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-3"
            accessibilityLabel="Neutral"
          />
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-4"
            accessibilityLabel="Agree"
          />
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-5"
            accessibilityLabel="Strongly agree"
          />
        </View>
      </ChoiceList>

      <ChoiceList
        name="question3"
        value=""
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <View
          background="subdued"
          padding="base"
          blockAlignment="center"
        >
          <TextBlock>
            I would purchase from Plant again.
          </TextBlock>
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-1"
            accessibilityLabel="Strongly disagree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-2"
            accessibilityLabel="Disagree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-3"
            accessibilityLabel="Neutral"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-4"
            accessibilityLabel="Agree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-5"
            accessibilityLabel="Strongly agree"
          />
        </View>
      </ChoiceList>
    </Grid>
  );
}

```

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

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const grid = root.createComponent(
      Grid,
      {
        columns: [
          'fill',
          '13%',
          '13%',
          '13%',
          '13%',
          '13%',
        ],
        rows: 'auto',
        spacing: 'none',
        border: 'base',
        cornerRadius: 'base',
        overflow: 'hidden',
      },
      [
        root.createComponent(View, {}, []),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Strongly disagree',
          ),
        ),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Disagree',
          ),
        ),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Neutral',
          ),
        ),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Agree',
          ),
        ),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Strongly agree',
          ),
        ),
        // Then create the ChoiceList for 'question1'
        root.createComponent(
          ChoiceList,
          {
            name: 'question1',
            value: '',
            onChange: (value) => {
              console.log(
                `onChange event with value: ${value}`,
              );
            },
          },
          [
            root.createComponent(
              View,
              {
                background: 'subdued',
                padding: 'base',
                blockAlignment: 'center',
              },
              root.createComponent(
                TextBlock,
                {},
                'I recommend Plant to others.',
              ),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-1',
                accessibilityLabel:
                  'Strongly disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-2',
                accessibilityLabel: 'Disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-3',
                accessibilityLabel: 'Neutral',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-4',
                accessibilityLabel: 'Agree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-5',
                accessibilityLabel:
                  'Strongly agree',
              }),
            ),
          ],
        ),
        // Then create the ChoiceList for 'question2'
        root.createComponent(
          ChoiceList,
          {
            name: 'question2',
            value: '',
            onChange: (value) => {
              console.log(
                `onChange event with value: ${value}`,
              );
            },
          },
          [
            root.createComponent(
              View,
              {
                padding: 'base',
                blockAlignment: 'center',
              },
              root.createComponent(
                TextBlock,
                {},
                'I have had a positive experience purchasing from Plant.',
              ),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-1',
                accessibilityLabel:
                  'Strongly disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-2',
                accessibilityLabel: 'Disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-3',
                accessibilityLabel: 'Neutral',
              }),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-4',
                accessibilityLabel: 'Agree',
              }),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-5',
                accessibilityLabel:
                  'Strongly agree',
              }),
            ),
          ],
        ),
        // Then create the ChoiceList for 'question3'
        root.createComponent(
          ChoiceList,
          {
            name: 'question3',
            value: '',
            onChange: (value) => {
              console.log(
                `onChange event with value: ${value}`,
              );
            },
          },
          [
            root.createComponent(
              View,
              {
                background: 'subdued',
                padding: 'base',
                blockAlignment: 'center',
              },
              root.createComponent(
                TextBlock,
                {},
                'I would purchase from Plant again.',
              ),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-1',
                accessibilityLabel:
                  'Strongly disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-2',
                accessibilityLabel: 'Disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-3',
                accessibilityLabel: 'Neutral',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-4',
                accessibilityLabel: 'Agree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-5',
                accessibilityLabel:
                  'Strongly agree',
              }),
            ),
          ],
        ),
      ],
    );

    root.appendChild(grid);
  },
);

```


The ChoiceList’s group variant, combined with the details property, allows for the conditional display of information when needed.

```jsx
import {
  reactExtension,
  BlockStack,
  Choice,
  ChoiceList,
  DatePicker,
  TextBlock,
  TextField,
  View,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <ChoiceList
      variant="group"
      name="white-glove"
      value={['white-glove-1']}
      onChange={(value) => {
        console.log(
          `onChange event with value: ${value}`,
        );
      }}
    >
      <Choice
        id="white-glove-1"
        details={
          <>
            <BlockStack spacing="base">
              <BlockStack spacing="extraTight">
                <TextBlock>
                  Choose a delivery date
                </TextBlock>
                <View
                  background="base"
                  border="base"
                  cornerRadius="base"
                  padding="base"
                >
                  <DatePicker selected="" />
                </View>
              </BlockStack>
              <BlockStack spacing="extraTight">
                <TextField
                  label="Additional instructions"
                  value=""
                />
                <TextBlock
                  appearance="subdued"
                  size="small"
                >
                  The more detailed the delivery
                  instructions are, the best we
                  can make the delivery experience
                  for you.
                </TextBlock>
              </BlockStack>
            </BlockStack>
          </>
        }
      >
        Use white glove delivery service
      </Choice>
    </ChoiceList>
  );
}

```

```js
import {
  extension,
  BlockStack,
  Choice,
  ChoiceList,
  DatePicker,
  TextBlock,
  TextField,
  View,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const choiceList = root.createComponent(
      ChoiceList,
      {
        name: 'white-glove',
        value: ['white-glove-1'],
        onChange: (nextValue) => {
          console.log(
            `onChange event with value: ${nextValue}`,
          );
        },
      },
      [
        root.createComponent(
          Choice,
          {id: 'white-glove-1'},
          [
            root.createComponent(
              BlockStack,
              {spacing: 'base'},
              [
                root.createComponent(
                  BlockStack,
                  {spacing: 'extraTight'},
                  [
                    root.createComponent(
                      TextBlock,
                      {},
                      'Choose a delivery date',
                    ),
                    root.createComponent(
                      View,
                      {
                        background: 'base',
                        border: 'base',
                        cornerRadius: 'base',
                        padding: 'base',
                      },
                      root.createComponent(
                        DatePicker,
                        {selected: ''},
                      ),
                    ),
                  ],
                ),
                root.createComponent(
                  BlockStack,
                  {spacing: 'extraTight'},
                  [
                    root.createComponent(
                      TextField,
                      {
                        label:
                          'Additional instructions',
                        value: '',
                      },
                    ),
                    root.createComponent(
                      TextBlock,
                      {
                        appearance: 'subdued',
                        size: 'small',
                      },
                      'The more detailed the delivery instructions are, the best we can make the delivery experience for you.',
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ],
    );

    root.appendChild(choiceList);
  },
);

```


The ChoiceList component is great for presenting a concise list of options, particularly when showcasing time ranges due to its ample horizontal space. However, if there’s more than 5 choices, use the [Select](https://shopify.dev/docs/api/checkout-ui-extensions/components/forms/select) component instead.

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

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

function Extension() {
  return (
    <ChoiceList
      name="time"
      value=""
      onChange={(value) => {
        console.log(
          `onChange event with value: ${value}`,
        );
      }}
    >
      <BlockStack>
        <Choice id="morning">
          9:00 AM - 12:00 PM
        </Choice>
        <Choice id="afternoon">
          12:00 PM - 3:00 PM
        </Choice>
        <Choice id="evening">
          3:00 PM - 5:00 PM
        </Choice>
      </BlockStack>
    </ChoiceList>
  );
}

```

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

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const choiceList = root.createComponent(
      ChoiceList,
      {
        name: 'time',
        value: '',
        onChange: (value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        },
      },
      [
        root.createComponent(BlockStack, {}, [
          root.createComponent(
            Choice,
            {id: 'morning'},
            '9:00 AM - 12:00 PM',
          ),
          root.createComponent(
            Choice,
            {id: 'afternoon'},
            '12:00 PM - 3:00 PM',
          ),
          root.createComponent(
            Choice,
            {id: 'evening'},
            '3:00 PM - 5:00 PM',
          ),
        ]),
      ],
    );

    root.appendChild(choiceList);
  },
);

```

## Examples

Use choice lists to present a list of choices where buyers can make a single selection or multiple selections.


The base variant’s flexibility allows for the creation of Likert scales using the ChoiceList component. By utilizing layout components, you can easily structure rows and columns for this purpose.

```jsx
import {
  reactExtension,
  Choice,
  ChoiceList,
  Grid,
  TextBlock,
  View,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Grid
      columns={[
        'fill',
        '13%',
        '13%',
        '13%',
        '13%',
        '13%',
      ]}
      rows="auto"
      spacing="none"
      border="base"
      cornerRadius="base"
      overflow="hidden"
    >
      <View />
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Strongly disagree
        </TextBlock>
      </View>
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Disagree
        </TextBlock>
      </View>
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Neutral
        </TextBlock>
      </View>
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Agree
        </TextBlock>
      </View>
      <View
        padding={['tight', 'extraTight']}
        blockAlignment="center"
        accessibilityVisibility="hidden"
      >
        <TextBlock inlineAlignment="center">
          Strongly agree
        </TextBlock>
      </View>

      <ChoiceList
        name="question1"
        value=""
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <View
          background="subdued"
          padding="base"
          blockAlignment="center"
        >
          <TextBlock>
            I recommend Plant to others.
          </TextBlock>
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-1"
            accessibilityLabel="Strongly disagree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-2"
            accessibilityLabel="Disagree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-3"
            accessibilityLabel="Neutral"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-4"
            accessibilityLabel="Agree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question1-5"
            accessibilityLabel="Strongly agree"
          />
        </View>
      </ChoiceList>

      <ChoiceList
        name="question2"
        value=""
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <View
          padding="base"
          blockAlignment="center"
        >
          <TextBlock>
            I have had a positive experience
            purchasing from Plant.
          </TextBlock>
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-1"
            accessibilityLabel="Strongly disagree"
          />
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-2"
            accessibilityLabel="Disagree"
          />
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-3"
            accessibilityLabel="Neutral"
          />
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-4"
            accessibilityLabel="Agree"
          />
        </View>
        <View
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question2-5"
            accessibilityLabel="Strongly agree"
          />
        </View>
      </ChoiceList>

      <ChoiceList
        name="question3"
        value=""
        onChange={(value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        }}
      >
        <View
          background="subdued"
          padding="base"
          blockAlignment="center"
        >
          <TextBlock>
            I would purchase from Plant again.
          </TextBlock>
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-1"
            accessibilityLabel="Strongly disagree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-2"
            accessibilityLabel="Disagree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-3"
            accessibilityLabel="Neutral"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-4"
            accessibilityLabel="Agree"
          />
        </View>
        <View
          background="subdued"
          blockAlignment="center"
          inlineAlignment="center"
        >
          <Choice
            id="question3-5"
            accessibilityLabel="Strongly agree"
          />
        </View>
      </ChoiceList>
    </Grid>
  );
}

```

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

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const grid = root.createComponent(
      Grid,
      {
        columns: [
          'fill',
          '13%',
          '13%',
          '13%',
          '13%',
          '13%',
        ],
        rows: 'auto',
        spacing: 'none',
        border: 'base',
        cornerRadius: 'base',
        overflow: 'hidden',
      },
      [
        root.createComponent(View, {}, []),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Strongly disagree',
          ),
        ),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Disagree',
          ),
        ),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Neutral',
          ),
        ),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Agree',
          ),
        ),
        root.createComponent(
          View,
          {
            padding: ['tight', 'extraTight'],
            blockAlignment: 'center',
            accessibilityVisibility: 'hidden',
          },
          root.createComponent(
            TextBlock,
            {inlineAlignment: 'center'},
            'Strongly agree',
          ),
        ),
        // Then create the ChoiceList for 'question1'
        root.createComponent(
          ChoiceList,
          {
            name: 'question1',
            value: '',
            onChange: (value) => {
              console.log(
                `onChange event with value: ${value}`,
              );
            },
          },
          [
            root.createComponent(
              View,
              {
                background: 'subdued',
                padding: 'base',
                blockAlignment: 'center',
              },
              root.createComponent(
                TextBlock,
                {},
                'I recommend Plant to others.',
              ),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-1',
                accessibilityLabel:
                  'Strongly disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-2',
                accessibilityLabel: 'Disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-3',
                accessibilityLabel: 'Neutral',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-4',
                accessibilityLabel: 'Agree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question1-5',
                accessibilityLabel:
                  'Strongly agree',
              }),
            ),
          ],
        ),
        // Then create the ChoiceList for 'question2'
        root.createComponent(
          ChoiceList,
          {
            name: 'question2',
            value: '',
            onChange: (value) => {
              console.log(
                `onChange event with value: ${value}`,
              );
            },
          },
          [
            root.createComponent(
              View,
              {
                padding: 'base',
                blockAlignment: 'center',
              },
              root.createComponent(
                TextBlock,
                {},
                'I have had a positive experience purchasing from Plant.',
              ),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-1',
                accessibilityLabel:
                  'Strongly disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-2',
                accessibilityLabel: 'Disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-3',
                accessibilityLabel: 'Neutral',
              }),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-4',
                accessibilityLabel: 'Agree',
              }),
            ),
            root.createComponent(
              View,
              {
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question2-5',
                accessibilityLabel:
                  'Strongly agree',
              }),
            ),
          ],
        ),
        // Then create the ChoiceList for 'question3'
        root.createComponent(
          ChoiceList,
          {
            name: 'question3',
            value: '',
            onChange: (value) => {
              console.log(
                `onChange event with value: ${value}`,
              );
            },
          },
          [
            root.createComponent(
              View,
              {
                background: 'subdued',
                padding: 'base',
                blockAlignment: 'center',
              },
              root.createComponent(
                TextBlock,
                {},
                'I would purchase from Plant again.',
              ),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-1',
                accessibilityLabel:
                  'Strongly disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-2',
                accessibilityLabel: 'Disagree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-3',
                accessibilityLabel: 'Neutral',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-4',
                accessibilityLabel: 'Agree',
              }),
            ),
            root.createComponent(
              View,
              {
                background: 'subdued',
                blockAlignment: 'center',
                inlineAlignment: 'center',
              },
              root.createComponent(Choice, {
                id: 'question3-5',
                accessibilityLabel:
                  'Strongly agree',
              }),
            ),
          ],
        ),
      ],
    );

    root.appendChild(grid);
  },
);

```


The ChoiceList’s group variant, combined with the details property, allows for the conditional display of information when needed.

```jsx
import {
  reactExtension,
  BlockStack,
  Choice,
  ChoiceList,
  DatePicker,
  TextBlock,
  TextField,
  View,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <ChoiceList
      variant="group"
      name="white-glove"
      value={['white-glove-1']}
      onChange={(value) => {
        console.log(
          `onChange event with value: ${value}`,
        );
      }}
    >
      <Choice
        id="white-glove-1"
        details={
          <>
            <BlockStack spacing="base">
              <BlockStack spacing="extraTight">
                <TextBlock>
                  Choose a delivery date
                </TextBlock>
                <View
                  background="base"
                  border="base"
                  cornerRadius="base"
                  padding="base"
                >
                  <DatePicker selected="" />
                </View>
              </BlockStack>
              <BlockStack spacing="extraTight">
                <TextField
                  label="Additional instructions"
                  value=""
                />
                <TextBlock
                  appearance="subdued"
                  size="small"
                >
                  The more detailed the delivery
                  instructions are, the best we
                  can make the delivery experience
                  for you.
                </TextBlock>
              </BlockStack>
            </BlockStack>
          </>
        }
      >
        Use white glove delivery service
      </Choice>
    </ChoiceList>
  );
}

```

```js
import {
  extension,
  BlockStack,
  Choice,
  ChoiceList,
  DatePicker,
  TextBlock,
  TextField,
  View,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const choiceList = root.createComponent(
      ChoiceList,
      {
        name: 'white-glove',
        value: ['white-glove-1'],
        onChange: (nextValue) => {
          console.log(
            `onChange event with value: ${nextValue}`,
          );
        },
      },
      [
        root.createComponent(
          Choice,
          {id: 'white-glove-1'},
          [
            root.createComponent(
              BlockStack,
              {spacing: 'base'},
              [
                root.createComponent(
                  BlockStack,
                  {spacing: 'extraTight'},
                  [
                    root.createComponent(
                      TextBlock,
                      {},
                      'Choose a delivery date',
                    ),
                    root.createComponent(
                      View,
                      {
                        background: 'base',
                        border: 'base',
                        cornerRadius: 'base',
                        padding: 'base',
                      },
                      root.createComponent(
                        DatePicker,
                        {selected: ''},
                      ),
                    ),
                  ],
                ),
                root.createComponent(
                  BlockStack,
                  {spacing: 'extraTight'},
                  [
                    root.createComponent(
                      TextField,
                      {
                        label:
                          'Additional instructions',
                        value: '',
                      },
                    ),
                    root.createComponent(
                      TextBlock,
                      {
                        appearance: 'subdued',
                        size: 'small',
                      },
                      'The more detailed the delivery instructions are, the best we can make the delivery experience for you.',
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ],
    );

    root.appendChild(choiceList);
  },
);

```


The ChoiceList component is great for presenting a concise list of options, particularly when showcasing time ranges due to its ample horizontal space. However, if there’s more than 5 choices, use the [Select](https://shopify.dev/docs/api/checkout-ui-extensions/components/forms/select) component instead.

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

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

function Extension() {
  return (
    <ChoiceList
      name="time"
      value=""
      onChange={(value) => {
        console.log(
          `onChange event with value: ${value}`,
        );
      }}
    >
      <BlockStack>
        <Choice id="morning">
          9:00 AM - 12:00 PM
        </Choice>
        <Choice id="afternoon">
          12:00 PM - 3:00 PM
        </Choice>
        <Choice id="evening">
          3:00 PM - 5:00 PM
        </Choice>
      </BlockStack>
    </ChoiceList>
  );
}

```

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

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const choiceList = root.createComponent(
      ChoiceList,
      {
        name: 'time',
        value: '',
        onChange: (value) => {
          console.log(
            `onChange event with value: ${value}`,
          );
        },
      },
      [
        root.createComponent(BlockStack, {}, [
          root.createComponent(
            Choice,
            {id: 'morning'},
            '9:00 AM - 12:00 PM',
          ),
          root.createComponent(
            Choice,
            {id: 'afternoon'},
            '12:00 PM - 3:00 PM',
          ),
          root.createComponent(
            Choice,
            {id: 'evening'},
            '3:00 PM - 5:00 PM',
          ),
        ]),
      ],
    );

    root.appendChild(choiceList);
  },
);

```