SegmentedControl

Examples

• Switch between views or filters

  Description

  Display mutually exclusive options in a compact horizontal control. This example demonstrates a SegmentedControl that allows users to switch between different views, filters, or content modes with clear visual selection states and smooth transitions.

  React

  import React from 'react';
  import {
    reactExtension,
    Screen,
    SegmentedControl,
    Stack,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  export const SmartGridModal = () => {
    const [selected, setSelected] =
      React.useState('1');
    return (
      <Screen
        name="SegmentedControl"
        title="SegmentedControl"
      >
        <Stack
          direction="vertical"
          paddingHorizontal="ExtraExtraLarge"
        >
          <SegmentedControl
            segments={[
              {
                id: '1',
                label: '1',
                disabled: false,
              },
              {
                id: '2',
                label: '2',
                disabled: false,
              },
              {
                id: '3',
                label: '3 (disabled)',
                disabled: true,
              },
            ]}
            selected={selected}
            onSelect={setSelected}
          />
        </Stack>
      </Screen>
    );
  };
  
  export default reactExtension(
    'pos.home.modal.render',
    () => {
      return <SmartGridModal />;
    },
  );
  

  TS

  import {
    extension,
    Screen,
    ScrollView,
    SegmentedControl,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.modal.render',
    (root) => {
      const mainScreen = root.createComponent(
        Screen,
        {
          name: 'SegmentedControl',
          title: 'SegmentedControl',
        },
      );
      const scrollView =
        root.createComponent(ScrollView);
  
      const onSelect = (id: string) => {
        segmentedControl.updateProps({
          selected: id,
        });
      };
  
      const segmentedControl = root.createComponent(
        SegmentedControl,
        {
          onSelect,
          selected: '1',
          segments: [
            {id: '1', label: '1', disabled: false},
            {id: '2', label: '2', disabled: false},
            {
              id: '3',
              label: '3 (disabled)',
              disabled: true,
            },
          ],
        },
      );
  
      scrollView.append(segmentedControl);
  
      mainScreen.append(scrollView);
      root.append(mainScreen);
    },
  );