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

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.

No Selection

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.

Results

{}

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()),
    )

API Reference

HighLevelRadioGroup

High level wrapper for the RadioGroup component.

Prop	Type	Description
`items`	List	The items of the radio group.
`direction`	Literal	The direction of the radio group.
`spacing`	Literal	The gap between the items of the radio group.
`size`	Literal	The size of the radio group.
`variant`	Literal	The variant of the radio group
`color_scheme`	Literal	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

See the full list of default event triggers

RadioGroupRoot

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

Prop	Type	Description
`size`	Literal	The size of the radio group: "1" \| "2" \| "3"
`variant`	Literal	The variant of the radio group
`color_scheme`	Literal	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

Trigger	Description
`on_change`	The on_change event handler is called when the value or checked state of the component changes.

RadioGroupItem

An item in the group that can be checked.

Prop	Type	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.