Choose a version:

ChoiceList

Presents multiple options for single or multiple selections. Use when merchants need to choose from a defined set of options in forms or filtering interfaces.

Anchor to propertiesProperties

Anchor to id id string: A unique identifier for the element.
Anchor to multiple multiple boolean Default: false: Whether multiple choices can be selected.
Anchor to values values string[]: An array of the values of the selected options.

This is a convenience prop for setting the selected prop on child options.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events

Anchor to change change (event: <"s-choice-list">) => void: Callback when the user changes a choice. Fires simultaneously with onInput.
Anchor to input input (event: <"s-choice-list">) => void: Callback when the user changes a choice. Fires simultaneously with onChange.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Anchor to choiceChoice

Creates options that let merchants select one or multiple items from a list of choices.

Anchor to disabled disabled boolean Default: false: Disables the control, disallowing any interaction.
Anchor to id id string: A unique identifier for the element.
Anchor to selected selected boolean Default: false: Whether the control is active.
Anchor to value value string: The value used in form data when the control is checked.

Was this section helpful?

Code

<s-choice-list>

<s-choice value="s" selected>Small</s-choice>

<s-choice value="m">Medium</s-choice>

<s-choice value="l">Large</s-choice>

<s-choice value="xl">Extra large</s-choice>

</s-choice-list>

Examples

Code

Default

<s-choice-list>
  <s-choice value="s" selected>Small</s-choice>
  <s-choice value="m">Medium</s-choice>
  <s-choice value="l">Large</s-choice>
  <s-choice value="xl">Extra large</s-choice>
</s-choice-list>

Preview

Anchor to examplesExamples

ChoiceList usage patterns

Anchor to example-multiple-selectionMultiple selection

Enable multiple selection mode with controlled values

Anchor to example-event-handlingEvent handling

Handle onChange and onInput events.

Was this section helpful?

Multiple selection

<s-choice-list

multiple

values={['small', 'medium']}

onChange={(event) => console.log('Selected:', event.target.values)}

<s-choice value="small">Small</s-choice>

<s-choice value="medium">Medium</s-choice>

<s-choice value="large">Large</s-choice>

</s-choice-list>

Examples

Multiple selection

Description

Enable multiple selection mode with controlled values

Default

<s-choice-list 
  multiple
  values={['small', 'medium']}
  onChange={(event) => console.log('Selected:', event.target.values)}
>
  <s-choice value="small">Small</s-choice>
  <s-choice value="medium">Medium</s-choice>
  <s-choice value="large">Large</s-choice>
</s-choice-list>

Event handling

Description

Handle onChange and onInput events.

Default

<s-choice-list
  onChange={(event) => console.log('onChange:', event.target.values)}
  onInput={(event) => console.log('onInput:', event.target.values)}
>
  <s-choice value="option1">Option 1</s-choice>
  <s-choice value="option2" disabled>Option 2 (disabled)</s-choice>
  <s-choice value="option3">Option 3</s-choice>
</s-choice-list>