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