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

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. Rendered on the opposite side to and primaryContent.

tertiaryContent

string | RemoteFragment

The tertiary label content for a choice in a group ChoiceList. Ignored in base variant. Rendered below primaryContent and secondaryContent.

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>

);

}

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