RadioGroup

A radio group component for single-selection options. For full props documentation, see Radix Radio Group.

Examples

tsx

import {RadioGroup, RadioGroupItem, Label} from '@shopify/shop-minis-react'

export default function MyComponent() {

return (

<Label>Option 1</Label>

</div>

<Label>Option 2</Label>

</div>

</RadioGroup>

)

}

Preview

Examples

tsx

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>
  )
}

Description

A radio group with selectable options

tsx

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>
  )
}

Description

A disabled radio group

tsx

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>
  )
}

Was this page helpful?