---
title: RadioGroup
description: A radio group component for single-selection options.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/radiogroup'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/radiogroup.md'
---

# RadioGroup

A radio group component for single-selection options. For full props documentation, see [Radix Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group).

Examples

## Preview

![radiogroup](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/RadioGroup--4BW95Eq.png)

### Examples

* ####

  ##### tsx

  ```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

  ```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

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

***