Radio
component
A radio button list lets merchants select from a given set of options.
string[]
required
The radio button options.
(item: string) => void
required
A callback to be performed when the radio list item is selected.
boolean
Whether the initialSelectedItem renders at the top of the list.
string
The name of the selected item. Warning: This is a controlled component, so this prop must be used in conjunction with onItemSelected.
Was this section helpful?
RadioButtonList
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 />;
},
);
Preview
