Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

Radio-group

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

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.

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

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"
    )

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

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

High level wrapper for the RadioGroup component.

PropTypeDescriptionValues
itemsList

The items of the radio group.

directionLiteral

The direction of the radio group.

spacingLiteral

The gap between the items of the radio group.

sizeLiteral

The size of the radio group.

variantLiteral

The variant of the radio group

color_schemeLiteral

The color of the radio group

high_contrastbool

Whether to render the radio group with higher contrast color against background

valuestr

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

default_valuestr

The initial value of checked radio item. Should be used in conjunction with on_change.

disabledbool

Whether the radio group is disabled

namestr

The name of the group. Submitted with its owning form as part of a name/value pair.

requiredbool

Whether the radio group is required

Event Triggers

No component specific event triggers

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

PropTypeDescriptionValues
sizeLiteral

The size of the radio group: "1" | "2" | "3"

variantLiteral

The variant of the radio group

color_schemeLiteral

The color of the radio group

high_contrastbool

Whether to render the radio group with higher contrast color against background

valuestr

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

default_valuestr

The initial value of checked radio item. Should be used in conjunction with on_change.

disabledbool

Whether the radio group is disabled

namestr

The name of the group. Submitted with its owning form as part of a name/value pair.

requiredbool

Whether the radio group is required

Event Triggers

TriggerDescription
on_change

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

An item in the group that can be checked.

PropTypeDescriptionValues
valuestr

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

disabledbool

When true, prevents the user from interacting with the radio item.

requiredbool

When true, indicates that the user must check the radio item before the owning form can be submitted.

Event Triggers

No component specific event triggers

← InputSelect →

Did you find this useful?