---
title: SegmentedControl
description: >-
  The segmented control lets the merchant easily switch between different lists
  or views on the same page.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/segmentedcontrol
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/segmentedcontrol.md
---

# Segmented​Controlcomponent

The segmented control lets the merchant easily switch between different lists or views on the same page.

## SegmentedControl

* segments

  Segment\[]

  required

  The segments to display.

* selected

  string

  required

  The id of the selected segment.

* onSelect

  (id: string) => void

  required

  A callback when a segment is selected.

### Segment

* id

  The id of the segment.

  ```ts
  string
  ```

* label

  The label of the segment.

  ```ts
  string
  ```

* disabled

  Whether the segment is disabled.

  ```ts
  boolean
  ```

```ts
export interface Segment {
  /**
   * The id of the segment.
   */
  id: string;
  /**
   * The label of the segment.
   */
  label: string;
  /**
   * Whether the segment is disabled.
   */
  disabled: boolean;
}
```

### Examples

* #### SegmentedControl

  ##### React

  ```tsx
  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

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/segmented-control-default.png)