Radio

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

Radio allows merchants to choose a single item from a list.

import {extend, Radio} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const radio1 = root.createComponent(Radio, {

label: 'Option 1',

helpText: 'Help text for option 1.',

checked: true,

id: 'option1',

name: 'greatOptions',

onChange: () => console.log('Option 1 selected'),

});

const radio2 = root.createComponent(Radio, {

label: 'Option 2',

helpText: 'Help text for option 2.',

id: 'option2',

name: 'greatOptions',

checked: false,

onChange: () => console.log('Option 2 selected'),

});

root.appendChild(radio1);

root.appendChild(radio2);

root.mount();

});

import React from 'react';

import {extend, render, Radio} from '@shopify/admin-ui-extensions-react';

function App() {

return (

<Radio

label="Option 1"

helpText="Help text for option 1."

checked

id="option1"

name="greatOptions"

onChange={() => console.log('Option 1 selected')}

<Radio

label="Option 2"

helpText="Help text for option 2."

id="option2"

name="greatOptions"

checked={false}

onChange={() => console.log('Option 2 selected')}

);

}

extend(

'Playground',

render(() => <App />),

);

import {extend, Radio} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const radio1 = root.createComponent(Radio, {
    label: 'Option 1',
    helpText: 'Help text for option 1.',
    checked: true,
    id: 'option1',
    name: 'greatOptions',
    onChange: () => console.log('Option 1 selected'),
  });

  const radio2 = root.createComponent(Radio, {
    label: 'Option 2',
    helpText: 'Help text for option 2.',
    id: 'option2',
    name: 'greatOptions',
    checked: false,
    onChange: () => console.log('Option 2 selected'),
  });

  root.appendChild(radio1);
  root.appendChild(radio2);
  root.mount();
});

import React from 'react';
import {extend, render, Radio} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <>
      <Radio
        label="Option 1"
        helpText="Help text for option 1."
        checked
        id="option1"
        name="greatOptions"
        onChange={() => console.log('Option 1 selected')}
      />
      <Radio
        label="Option 2"
        helpText="Help text for option 2."
        id="option2"
        name="greatOptions"
        checked={false}
        onChange={() => console.log('Option 2 selected')}
      />
    
  );
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
label?	`string`	Label for the radio button.
helpText?	`string`	Additional text to aid in use.
checked?	`boolean`	Radio button is selected.
id?	`string`	Unique ID for radio button.
name	`string`	Use `name` to group radio buttons together by giving them the same `name`.
value?	`string`	Value of selected input on selected
onChange?	`(newValue: string) => void`	Callback when the radio button is toggled.

✅ Do	🛑 Don't
Use Radio to give merchants a single select choice	Horizontally stack Radio options
Vertically align Radio options

For more guidelines, refer to Polaris' Radio button best practices.

Was this page helpful?