11 KiB
| components | |||
|---|---|---|---|
|
import reflex as rx
from pcweb.templates.docpage import style_grid
Radio Group
A set of interactive radio buttons where only one can be selected at a time.
Basic example
The rx.radio.root contains all the parts of a radio group. The rx.radio.item is an item in the group that can be checked.
rx.radio.root(
rx.radio.item(value="1"),
rx.radio.item(value="2"),
rx.radio.item(value="3"),
default_value="1",
)
The default_value prop is used to set the value of the radio item that should be checked when initially rendered.
Radio Group Root
Control the value
The state can specify which item in a radio group is checked by setting the value prop,
making the radio group a fully-controlled input. To allow the user to change the selected
value by clicking, the on_change event handler must be defined to update
the Var representing the current value.
class RadioState1(rx.State):
val: str = ""
@rx.cached_var
def display_value(self):
return self.val or "No Selection"
def radio_state_example():
return rx.flex(
rx.badge(
RadioState1.display_value,
color_scheme="green"
),
rx.radio.root(
rx.radio.item(value="1"),
rx.radio.item(value="2"),
rx.radio.item(value="3"),
value=RadioState1.val,
on_change=RadioState1.set_val,
),
rx.button("Clear", on_click=RadioState1.set_val("")),
align="center",
justify="center",
direction="column",
spacing="2",
)
When the disabled prop is set to True, it prevents the user from interacting with radio items.
rx.flex(
rx.radio.root(
rx.radio.item(value="1"),
rx.radio.item(value="2"),
),
rx.radio.root(
rx.radio.item(value="1"),
rx.radio.item(value="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(rx.State):
form_data: dict = {}
def handle_submit(self, form_data: dict):
"""Handle the form submit."""
self.form_data = form_data
def form_example():
return rx.flex(
rx.form.root(
rx.flex(
rx.radio.root(
"Radio Group ",
rx.radio.item(value="1"),
rx.radio.item(value="2"),
rx.radio.item(value="3"),
name="radio",
required=True,
),
rx.button("Submit", type="submit"),
direction="column",
spacing="2",
),
on_submit=FormRadioState.handle_submit,
reset_on_submit=True,
),
rx.divider(size="4"),
rx.heading("Results"),
rx.text(FormRadioState.form_data.to_string()),
direction="column",
spacing="2",
)
Radio Group Item
value
The value given as data when submitted with a name on rx.radio.root.
disabled
Use the disabled prop to create a disabled radiobutton. When True, prevents the user from interacting with the radio item. This differs from the disabled prop used by the rx.radio.root, which allows you to disable all the rx.radio.item components within the rx.radio.root.
rx.flex(
rx.radio.root(
rx.flex(
rx.text(
rx.flex(
rx.radio.item(value="1"),
"Off",
spacing="2",
),
as_="label",
size="2",
),
rx.text(
rx.flex(
rx.radio.item(value="2"),
"On",
spacing="2",
),
as_="label",
size="2",
),
direction="column",
spacing="2",
),
),
rx.radio.root(
rx.flex(
rx.text(
rx.flex(
rx.radio.item(value="1", disabled=True),
"Off",
spacing="2",
),
as_="label",
size="2",
color="gray",
),
rx.text(
rx.flex(
rx.radio.item(value="2"),
"On",
spacing="2",
),
as_="label",
size="2",
color="gray",
),
direction="column",
spacing="2",
),
),
direction="column",
spacing="2",
)
required
When True, indicates that the user must check the radio_item_group before the owning form can be submitted. This can only be used when a single rx.radio.item is used.
class FormRadioState2(rx.State):
form_data: dict = {}
def handle_submit(self, form_data: dict):
"""Handle the form submit."""
self.form_data = form_data
def form_example2():
return rx.flex(
rx.form.root(
rx.flex(
rx.radio.root(
rx.radio.item(value="1", required=True),
name="radio",
),
rx.button("Submit", type="submit"),
direction="column",
spacing="2",
),
on_submit=FormRadioState2.handle_submit,
reset_on_submit=True,
),
rx.divider(size="4"),
rx.heading("Results"),
rx.text(FormRadioState2.form_data.to_string()),
direction="column",
spacing="2",
)
Styling
size
rx.flex(
rx.radio.root(
rx.radio.item(value="1"),
size="1",
),
rx.radio.root(
rx.radio.item(value="1"),
size="2",
),
rx.radio.root(
rx.radio.item(value="1"),
size="3",
),
spacing="2",
)
variant
rx.flex(
rx.flex(
rx.radio.root(
rx.radio.item(value="1"),
rx.radio.item(value="2"),
variant="surface",
default_value="1",
),
direction="column",
spacing="2",
as_child=True,
),
rx.flex(
rx.radio.root(
rx.radio.item(value="1"),
rx.radio.item(value="2"),
variant="classic",
default_value="1",
),
direction="column",
spacing="2",
as_child=True,
),
rx.flex(
rx.radio.root(
rx.radio.item(value="1"),
rx.radio.item(value="2"),
variant="soft",
default_value="1",
),
direction="column",
spacing="2",
as_child=True,
),
spacing="2",
)
color
rx.flex(
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="indigo",
default_value="1",
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="cyan",
default_value="1",
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="orange",
default_value="1",
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="crimson",
default_value="1",
),
spacing="2"
)
high_contrast
Use the high_contrast prop to increase color contrast with the background.
rx.grid(
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="cyan",
default_value="1",
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="cyan",
default_value="1",
high_contrast=True,
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="indigo",
default_value="1",
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="indigo",
default_value="1",
high_contrast=True,
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="orange",
default_value="1",
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="orange",
default_value="1",
high_contrast=True,
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="crimson",
default_value="1",
),
rx.radio.root(
rx.radio.item(value="1"),
color_scheme="crimson",
default_value="1",
high_contrast=True,
),
rows="2",
spacing="2",
display="inline-grid",
flow="column"
)
alignment
Composing rx.radio.item within text automatically centers it with the first line of text.
rx.flex(
rx.radio.root(
rx.text(
rx.flex(
rx.radio.item(value="1"),
"Default",
spacing="2",
),
size="2",
as_="label",
),
rx.text(
rx.flex(
rx.radio.item(value="2"),
"Compact",
spacing="2",
),
size="2",
as_="label",
),
default_value="1",
size="1",
),
rx.radio.root(
rx.text(
rx.flex(
rx.radio.item(value="1"),
"Default",
spacing="2",
),
size="3",
as_="label",
),
rx.text(
rx.flex(
rx.radio.item(value="2"),
"Compact",
spacing="2",
),
size="3",
as_="label",
),
default_value="1",
size="2",
),
rx.radio.root(
rx.text(
rx.flex(
rx.radio.item(value="1"),
"Default",
spacing="2",
),
size="4",
as_="label",
),
rx.text(
rx.flex(
rx.radio.item(value="2"),
"Compact",
spacing="2",
),
size="4",
as_="label",
),
default_value="1",
size="3",
),
spacing="3",
direction="column",
)
style_grid(component_used=rx.radio.root, component_used_str="radiogrouproot", variants=["classic", "surface", "soft"], components_passed=rx.radio.item(), disabled=True,)
Real World Example
rx.radio.root(
rx.flex(
rx.text(
rx.flex(
rx.radio.item(value="1"),
"Default",
spacing="2",
),
size="2",
as_="label",
),
rx.text(
rx.flex(
rx.radio.item(value="2"),
"Comfortable",
gap="2",
),
size="2",
as_="label",
),
rx.text(
rx.flex(
rx.radio.item(value="3"),
"Compact",
gap="2",
),
size="2",
as_="label",
),
direction="column",
gap="2",
),
default_value="1",
)