505 lines
11 KiB
Markdown
505 lines
11 KiB
Markdown
---
|
|
components:
|
|
- rx.radix.radio_group
|
|
- rx.radix.radio_group.root
|
|
- rx.radix.radio_group.item
|
|
---
|
|
|
|
|
|
```python exec
|
|
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.
|
|
|
|
```python demo
|
|
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`.
|
|
|
|
```python demo exec
|
|
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.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo exec
|
|
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`.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo exec
|
|
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
|
|
|
|
```python demo
|
|
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
|
|
|
|
```python demo
|
|
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
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo
|
|
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",
|
|
)
|
|
```
|
|
|
|
```python eval
|
|
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
|
|
|
|
```python demo
|
|
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",
|
|
)
|
|
```
|