MultipleChoice Component

• The MultipleChoice component is a versatile UI element designed for gathering selections from a set of options. It efficiently handles user interactions and visual feedback for a list of choices, each represented by a toggleable button. This component is ideal for scenarios like settings toggles, quiz questions, or any form where multiple selectable options are needed.

  The component supports animations for each choice entry, enhancing user experience with visual cues that guide interaction. Additionally, it allows for extensive customization of both the toggle button itself and the selection state through a comprehensive style prop.

  Here's an example showing how you can use the MultipleChoice component:

• 
  

  <MultipleChoice
    choices={[
      { label: 'Choice 1', value: '1' },
      { label: 'Choice 2', value: '2', disabled: true },
      { label: 'Choice 3', value: '3' }
    ]}
    onChoiceSelected={
      (index, value) => console.log(`${value} selected`)
    }
    selectedIndexes={[0]}
  />

Integration

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Step 1: Importing the Component

Start by importing the MultipleChoice component from its module:

import { MultipleChoice } from '@shopify/shop-minis-platform-sdk';

Step 2: Configuring the MultipleChoice Component

Integrating the MultipleChoice involves setting up the choices and handling their selection:

<MultipleChoice
  choices={[
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' }
  ]}
  selectedIndexes={[1]}
  onChoiceSelected={(index, value) => handleChoiceSelection(index, value)}
/>

Examples

Basic Example of MultipleChoice:

<MultipleChoice
  choices={[
    { label: 'Yes', value: 'yes' },
    { label: 'No', value: 'no' }
  ]}
  onChoiceSelected={(index, value) => console.log(`Choice: ${value}`)}
  selectedIndexes={[]}
/>

Custom Styles and Animation Disabled:

<MultipleChoice
  choices={[
    { label: 'Red', value: 'red' },
    { label: 'Blue', value: 'blue' }
  ]}
  onChoiceSelected={(index, value) => console.log(`Color: ${value}`)}
  selectedIndexes={[1]}
  style={{
    toggleButtonStyle: { backgroundColor: 'lightgray' },
    toggleButtonSelectedStyle: { backgroundColor: 'darkgray' },
    textStyle: { color: 'white' }
  }}
  animated={false}
/>

Props

• choices (Array<ChoiceType>): Array of choice objects with properties label, value, and optionally disabled.
• onChoiceSelected ((index: number, value: T) => void): Callback function called when a choice is selected.
• selectedIndexes (Array<number>): Array of indexes that are initially selected.
• style (MultipleChoiceStyles, optional): Custom styles for the toggle button and text.
• animated (boolean, optional): Defines whether the entry animation is enabled for choice elements.

For more details on the props, please refer to the MultipleChoice Props.