---
title: RadioButtonList
description: A radio button list lets merchants select from a given set of options.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/radiobuttonlist
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/radiobuttonlist.md
---

# Radio​Button​Listcomponent

A radio button list lets merchants select from a given set of options.

## RadioButtonList

* items

  string\[]

  required

  The radio button options.

* onItemSelected

  (item: string) => void

  required

  A callback to be performed when the radio list item is selected.

* initialSelectedItem

  string

  The name of the selected item. Warning: This is a controlled component, so this prop must be used in conjunction with onItemSelected.

* initialOffsetToShowSelectedItem

  boolean

  Whether the initialSelectedItem renders at the top of the list.

### Examples

* #### RadioButtonList

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    RadioButtonList,
    Screen,
    ScrollView,
    Text,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridModal = () => {
    const [selected, setSelected] =
      React.useState('');

    return (
      <Screen
        name="RadioButtonList"
        title="RadioButtonList"
      >
        <ScrollView>
          <RadioButtonList
            items={['1', '2', '3']}
            onItemSelected={setSelected}
            initialSelectedItem={selected}
          />
          <Text>{selected}</Text>
        </ScrollView>
      </Screen>
    );
  };

  export default reactExtension(
    'pos.home.modal.render',
    () => {
      return <SmartGridModal />;
    },
  );
  ```

  ##### TS

  ```ts
  import {
    extension,
    RadioButtonList,
    Screen,
    ScrollView,
    Text,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.home.modal.render',
    (root) => {
      const mainScreen = root.createComponent(
        Screen,
        {
          name: 'RadioButtonList',
          title: 'RadioButtonList',
        },
      );
      const scrollView =
        root.createComponent(ScrollView);

      const text = root.createComponent(Text);

      const radioButtonList = root.createComponent(
        RadioButtonList,
        {
          items: ['1', '2', '3'],
          onItemSelected: (selected) => {
            text.replaceChildren(selected);
            radioButtonList.updateProps({
              initialSelectedItem: selected,
            });
          },
        },
      );

      scrollView.append(radioButtonList);
      scrollView.append(text);

      mainScreen.append(scrollView);
      root.append(mainScreen);
    },
  );
  ```

## Preview

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