# Radio Group

> Based on [Radix Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group)

The Radio Group component allows users to select a single option from a list of choices. Unlike checkboxes, only one radio button in a group can be selected at a time.

## When to Use

Use Radio Group for:

* Selecting one option from a small set (2-5 options)
* Payment method selection
* Shipping options
* Any mutually exclusive choice

## Structure

The Radio Group component consists of:

| Component                 | Description                              |
| ------------------------- | ---------------------------------------- |
| **Radio Group**           | The container managing selection state   |
| **Radio Group Item**      | An individual radio button               |
| **Radio Group Indicator** | The visual indicator (dot) when selected |

## How to Use

1. Drag a **Radio Group** component from Components > Radix onto your canvas
2. The component comes with sample radio items
3. Add or remove Radio Group Items as needed
4. Set a unique `value` on each Radio Group Item
5. Add labels next to each item for clarity
6. Style the items and indicators

## Using with Labels

For proper accessibility, wrap each radio in a [Label](/university/radix/label.md):

```
Label
├── Radio Group Item
│   └── Radio Group Indicator
└── Text "Option Name"
```

Or connect via `id` and `htmlFor` attributes.

## Using with Collections

To generate radio options dynamically:

1. Add a [Collection](/university/core-components/collection.md) inside the Radio Group
2. Add a Label containing a Radio Group Item
3. Bind the `value` property to a unique identifier
4. Bind the label text to your option's name

## Properties

Some commonly used properties (see the Settings panel for all available options):

### Radio Group

| Property     | Description                    |
| ------------ | ------------------------------ |
| **id**       | Unique identifier              |
| **name**     | Form field name for submission |
| **value**    | The currently selected value   |
| **required** | Whether selection is required  |

### Radio Group Item

| Property  | Description                                  |
| --------- | -------------------------------------------- |
| **value** | Unique identifier for this option (required) |

## Styling States

Some common states (you can also create custom states):

* **Checked** (`[data-state=checked]`) - Item is selected
* **Unchecked** (`[data-state=unchecked]`) - Item is not selected
* **Disabled** (`:disabled`) - Item cannot be selected
* **Focus** (`:focus-visible`) - Item has keyboard focus

## Related

* [Select](/university/radix/select.md) – Dropdown selection for choosing from a list of options
* [Switch](/university/radix/switch.md) – Toggle control for binary on/off choices
* [Label](/university/radix/label.md) – Accessible labels for form controls
* [Form](/university/core-components/form.md) – Container for form elements and submission handling
* [Collection](/university/core-components/collection.md) – Generate radio options dynamically from data


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/radix/radio-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.