Radio
component
A radio group component for single-selection options. You can view the Storybook for more interactive examples.
Was this section helpful?
RadioGroup
import {RadioGroup, RadioGroupItem, Label} from '@shopify/shop-minis-react'
export default function MyComponent() {
return (
<RadioGroup defaultValue="option-1">
<div className="flex items-center space-x-2">
<RadioGroupItem value="option-1" id="option-1" />
<Label>Option 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="option-2" id="option-2" />
<Label>Option 2</Label>
</div>
</RadioGroup>
)
}
examples
RadioGroup
import {RadioGroup, RadioGroupItem, Label} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <RadioGroup defaultValue="option-1"> <div className="flex items-center space-x-2"> <RadioGroupItem value="option-1" id="option-1" /> <Label>Option 1</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="option-2" id="option-2" /> <Label>Option 2</Label> </div> </RadioGroup> ) }
Preview
Anchor to examplesExamples
RadioGroup configurations and states
Anchor to example-default-radio-groupDefault radio group
A radio group with selectable options
Anchor to example-disabled-stateDisabled state
A disabled radio group
Was this section helpful?
Default radio group
import {RadioGroup, RadioGroupItem, Label} from '@shopify/shop-minis-react'
export default function MyComponent() {
return (
<RadioGroup defaultValue="option-1">
<div className="flex items-center space-x-2">
<RadioGroupItem value="option-1" id="option-1" />
<Label>Option 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="option-2" id="option-2" />
<Label>Option 2</Label>
</div>
</RadioGroup>
)
}
examples
Default radio group
description
A radio group with selectable options
import {RadioGroup, RadioGroupItem, Label} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <RadioGroup defaultValue="option-1"> <div className="flex items-center space-x-2"> <RadioGroupItem value="option-1" id="option-1" /> <Label>Option 1</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="option-2" id="option-2" /> <Label>Option 2</Label> </div> </RadioGroup> ) }Disabled state
description
A disabled radio group
import {RadioGroup, RadioGroupItem, Label} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <RadioGroup defaultValue="option-1" disabled> <div className="flex items-center space-x-2"> <RadioGroupItem value="option-1" id="disabled-option-1" /> <Label>Option 1</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="option-2" id="disabled-option-2" /> <Label>Option 2</Label> </div> </RadioGroup> ) }