Open lpdswing opened 2 months ago
@lpdswing Please clarify exactly what you are trying to ask. I think this can be helpful. You can go through this link: https://reflex.dev/docs/library/forms/radio-group/
rx.radio(["1", "2"])
The effect shown in HTML is as follows, I hope that when the value is 1, the text of the radio button displays as "apple" instead of 1, and when the value is 2, the text is "orange", not the default display of 1,2. You should understand what I mean, right? @DevoScientist
I think I was able to achieve the desired output, but it was not intuitive or quick for me.
The example below seems to properly label the individual radio options while capturing the value on change, though I still can't label/name the group itself. (What is the difference between rx.radio_group
and rx.radio_group.root
and how do you use them together?)
I think what would help in the docs are more examples beyond the very basic rx.radio(["1", "2", "3"], default_value="1")
and ones that don't seem to assume a lot of existing knowledge about how all these individual pieces work together. In this case, I did not think to look at the rx.text
component for figuring out how to label a radio button.
import reflex as rx
from rxconfig import config
class FormRadioState_HL(rx.State):
val: str = ""
form_data: dict = {}
def handle_submit(self, form_data: dict):
"""Handle the form submit."""
self.form_data = form_data
def index() -> rx.Component:
# Welcome Page (Index)
return rx.container(
rx.form(
rx.radio_group.root(
rx.text(
rx.flex(
rx.radio_group.item(
value = "1"
),
"Apple"
),
as_="label",
),
rx.text(
rx.flex(
rx.radio_group.item(
value = "2"
),
"Banana"
),
as_="label",
),
rx.text(
rx.flex(
rx.radio_group.item(
value = "3"
),
"Cherry"
),
as_="label",
),
value = FormRadioState_HL.val,
on_change = FormRadioState_HL.set_val
),
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.val),
)
app = rx.App()
app.add_page(index)
I want the text shown on the radio to be different from the actual value.