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.
{}
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.
A set of interactive radio buttons where only one can be selected at a time.
Did you find this useful?