How to use rx.radio to achieve this html effect

[lpdswing]

<form action="">
  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">苹果</label><br>
  <input type="radio" id="orange" name="fruit" value="orange">
  <label for="orange">橙子</label><br>
  <input type="radio" id="banana" name="fruit" value="banana">
  <label for="banana">香蕉</label><br>
  <input type="submit" value="提交">
</form>

I want the text shown on the radio to be different from the actual value.

[DevoScientist]

@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/

[lpdswing]

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

[pglevy]

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)