Radio

Use radios to present each item in a list of options where buyers must make a single selection. Radio components should always appear in groups of two or more; if a buyer has only a single, boolean option, use a checkbox instead.

Unlike most field components, any children passed to this component will be used as the label for the checkbox.

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

extend('Checkout::PostPurchase::Render', (root) => {

const radio = root.createComponent(

Radio,

{id: 'radio', name: 'radio'},

'I want this choice',

);

root.appendChild(radio);

});

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

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return (

I want this choice

</Radio>

);

}

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

extend('Checkout::PostPurchase::Render', (root) => {
  const radio = root.createComponent(
    Radio,
    {id: 'radio', name: 'radio'},
    'I want this choice',
  );

  root.appendChild(radio);
});

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

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <Radio id="radio" name="radio">
      I want this choice
    </Radio>
  );
}

Anchor to PropsProps

optional = ?

Name	Type	Description
id?	`string`	A unique identifier for the field. When no `id` is provided, a globally unique value will be used instead.
name	`string`	An identifier for the field that is unique within the nearest containing `<Form />` component. When you create multiple radio components representing different options for the same choice, each one should have the same `name` property.
value?	`boolean`	Whether the radio is selected. This prop is an alias for `checked`, and can be useful in form libraries that provide a normalized API for dealing with both `boolean` and `string` values. If both `value` and `checked` are provided, `checked` takes precedence.
checked?	`boolean`	Whether the radio is selected.
disabled?	`boolean`	Whether the radio can be changed.
accessibilityLabel?	`string`	A label to use for the field that will be used for buyers using assistive technologies. When provided, any `children` supplied to this component are hidden from being seen for accessibility purposes to prevent duplicate content from being read.
onChange?	`(value: boolean) => void`	A callback that is run whenever the checkbox is changed. This callback is called with a boolean indicating whether the radio should now be active or inactive. This component is controlled, so you must store this value in state and reflect it back in the `checked` or `value` props.

Was this page helpful?