reflex/docs/library/forms/radio_group.md

components	HighLevelRadioGroup	RadioGroupRoot	RadioGroupItem
rx.radix.radio_group rx.radix.radio_group.root rx.radix.radio_group.item	lambda **props: rx.radix.themes.radio_group(["1", "2", "3", "4", "5"], **props)	lambda **props: rx.radix.themes.radio_group.root( rx.radix.themes.radio_group.item(value="1"), rx.radix.themes.radio_group.item(value="2"), rx.radix.themes.radio_group.item(value="3"), rx.radix.themes.radio_group.item(value="4"), rx.radix.themes.radio_group.item(value="5"), **props )	lambda **props: rx.radix.themes.radio_group.root( rx.radix.themes.radio_group.item(value="1", **props), rx.radix.themes.radio_group.item(value="2", **props), rx.radix.themes.radio_group.item(value="3",), rx.radix.themes.radio_group.item(value="4",), rx.radix.themes.radio_group.item(value="5",), )

import reflex as rx
from pcweb.templates.docpage import style_grid

High Level Radio Group

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

Basic example

rx.radio(["1", "2", "3"], default_value="1")

The default_value prop can be used to set the value of the radio item that should be checked when initially rendered.

Setting direction, spacing and size

The direction of the radio_group can be set using the direction prop which takes values 'row' | 'column' | 'row-reverse' | 'column-reverse' |.

The gap between the radio_group items can also be set using the gap prop, which takes values '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' |.

The size of the radio_group items and the associated text can be set with the size prop, which can take values 1' | '2' | '3' |

rx.radio(["1", "2", "3", "4", "5"], direction="row", spacing="8", size="3")

Using State Vars in the RadioGroup

State vars can also be passed in as the items to the radiogroup.

class RadioState_HL1(rx.State):
    items: list[str] = ["1", "2", "3"]

def radio_state_example_HL1():
    return rx.radio(RadioState_HL1.items, direction="row", spacing="9")

Control the value

The controlled value of the radio item to check. Should be used in conjunction with on_change event handler.

class RadioState_HL(rx.State):
    text: str = "No Selection"


def radio_state_example_HL():
    return rx.vstack(
        rx.badge(RadioState_HL.text, color_scheme="green"),
        rx.radio(["1", "2", "3"], on_change=RadioState_HL.set_text),
    )

When the disabled prop is set to True, it prevents the user from interacting with radio items.

rx.flex(
    rx.radio(["1", "2"]),
    rx.radio(["1", "2"], disabled=True),
    spacing="2",
)

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.

class FormRadioState_HL(rx.State):
    form_data: dict = {}

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


def form_example_HL():
    return rx.vstack(
        rx.form.root(
            rx.vstack(
                rx.radio(["1", "2", "3"], name="radio", required=True,),
                rx.button("Submit", type="submit"),
            ),
            on_submit=FormRadioState_HL.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(width="100%"),
        rx.heading("Results"),
        rx.text(FormRadioState_HL.form_data.to_string()),
    )