# Choice

Options inside a `ChoiceList`.

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

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

```

## ChoiceProps

### ChoiceProps

### accessibilityLabel

value: `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

value: `string | RemoteFragment`

Additional content to be revealed when selected.

### disabled

value: `boolean`

Whether the choice can be changed.

### id

value: `string`

A unique identifier for the choice.

### primaryContent

value: `string | RemoteFragment`

The primary content for a choice. Rendered below `<label>`.

### secondaryContent

value: `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 <label> and `primaryContent`.

### tertiaryContent

value: `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`.

## Related

- [ChoiceList](choicelist)