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.
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.
Event Triggers
See the full list of default event triggersA set of interactive radio buttons where only one can be selected at a time.
Event Triggers
Did you find this useful?
