> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.radio_group
  - rx.radio_group.root
  - rx.radio_group.item

HighLevelRadioGroup: |
  lambda **props: rx.radio_group(["1", "2", "3", "4", "5"], **props)

RadioGroupRoot: |
  lambda **props: rx.radio_group.root(
      rx.radio_group.item(value="1"),
      rx.radio_group.item(value="2"),
      rx.radio_group.item(value="3"),
      rx.radio_group.item(value="4"),
      rx.radio_group.item(value="5"),
      **props
  )

RadioGroupItem: |
  lambda **props: rx.radio_group.root(
      rx.radio_group.item(value="1", **props),
      rx.radio_group.item(value="2", **props),
      rx.radio_group.item(value="3", **props),
      rx.radio_group.item(value="4", **props),
      rx.radio_group.item(value="5", **props),
      default_value="1",
  )
---

```python exec
import reflex as rx
```

# Radio Group

A set of interactive radio buttons where only one can be selected at a time.

## Basic example

```python demo exec
class RadioGroupState(rx.State):
    item: str = "No Selection"

    @rx.event
    def set_item(self, item: str):
        self.item = item


def radio_group_state_example():
    return rx.vstack(
        rx.badge(RadioGroupState.item, color_scheme="green"),
        rx.radio(["1", "2", "3"], on_change=RadioGroupState.set_item, direction="row"),
    )
```

## Submitting a form using Radio Group

The `name` prop is used to name the group. It is submitted with its owning form as part of a name/value pair.

When the `required` prop is `True`, it indicates that the user must check a radio item before the owning form can be submitted.

```python demo exec
class FormRadioState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        """Handle the form submit."""
        self.form_data = form_data


def radio_form_example():
    return rx.card(
        rx.vstack(
            rx.heading("Example Form"),
            rx.form.root(
                rx.vstack(
                    rx.radio_group(
                        ["Option 1", "Option 2", "Option 3"],
                        name="radio_choice",
                        direction="row",
                    ),
                    rx.button("Submit", type="submit"),
                    width="100%",
                    spacing="4",
                ),
                on_submit=FormRadioState.handle_submit,
                reset_on_submit=True,
            ),
            rx.divider(),
            rx.hstack(
                rx.heading("Results:"),
                rx.badge(FormRadioState.form_data.to_string()),
            ),
            align_items="left",
            width="100%",
            spacing="4",
        ),
        width="50%",
    )
```

## API Reference

### rx.radio_group

High level wrapper for the RadioGroup component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | Sequence[str] | - | The items of the radio group. |
| `direction` | Literal["row", "column", "row-reverse", "column-reverse"] | - | The direction of the radio group. |
| `spacing` | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] | - | The gap between the items of the radio group. |
| `size` | Literal["1", "2", "3"] | - | The size of the radio group. |
| `variant` | Literal["classic", "surface", "soft"] | - | The variant of the radio group. |
| `color_scheme` | Literal["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "brown", "orange", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray"] | - | The color of the radio group. |
| `high_contrast` | bool | - | Whether to render the radio group with higher contrast color against background. |
| `value` | str | - | The controlled value of the radio item to check. Should be used in conjunction with on_change. |
| `default_value` | str | - | The initial value of checked radio item. Should be used in conjunction with on_change. |
| `disabled` | bool | - | Whether the radio group is disabled. |
| `name` | str | - | The name of the group. Submitted with its owning form as part of a name/value pair. |
| `required` | bool | - | Whether the radio group is required. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.radio_group.root

A set of interactive radio buttons where only one can be selected at a time.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | Literal["1", "2", "3"], Breakpoints[str, Literal["1", "2", "3"]] | - | The size of the radio group: "1", "2", "3". |
| `variant` | Literal["classic", "surface", "soft"] | - | The variant of the radio group. |
| `color_scheme` | Literal["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "brown", "orange", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray"] | - | The color of the radio group. |
| `high_contrast` | bool | - | Whether to render the radio group with higher contrast color against background. |
| `value` | str | - | The controlled value of the radio item to check. Should be used in conjunction with on_change. |
| `default_value` | str | - | The initial value of checked radio item. Should be used in conjunction with on_change. |
| `disabled` | bool | - | Whether the radio group is disabled. |
| `name` | str | - | The name of the group. Submitted with its owning form as part of a name/value pair. |
| `required` | bool | - | Whether the radio group is required. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

Component-specific event triggers:

| Event Trigger | Description |
| --- | --- |
| `on_change` | Fired when the value of the radio group changes. |

### rx.radio_group.item

An item in the group that can be checked.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | str | - | The value of the radio item to check. Should be used in conjunction with on_change. |
| `disabled` | bool | - | When true, prevents the user from interacting with the radio item. |
| `required` | bool | - | When true, indicates that the user must check the radio item before the owning form can be submitted. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/