---
title: Radio
description: Radio allows merchants to choose a single item from a list.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/radio
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/radio.md
---

# Radio

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

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

##### JavaScript

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

##### React

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

***

## Props

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](https://polaris.shopify.com/components/selection-and-input/radio-button#best-practices).

***