Trouble with basic form field behavior

[pglevy]

Hi there,

I'm just starting to play around with Reflex and was going through the Chat App tutorial, but I'm having trouble with the form field behavior when trying to use a label.

Here's a reference on codepen of what I'm trying to achieve: a text input with a programmatically associated label (so the input receives focus when you click the label) that you can interact with by typing into it.

I started with this basic example, which seems to work, but when I start using state, I run into two problems:

1. When I try to use the value parameter on the input to reference the state variable, it loses the connection to the label. (Looks like the id doesn't get rendered on the input.) Also, I can't change the value of the input by typing into it.
2. When I try to use on_change to listen for changes and update the variable, compiling fails with the error: TypeError: Only Radix TextFieldRoot is allowed as child of FormControl.

It seems like I'm not grasping something about state and how it works, so I appreciate any help pointing me in the right direction.

I have this here on a repl and the code pasted below.

import reflex as rx

# from rxconfig import config

class State(rx.State):
    """The app state."""
    message: str = "Default"

def index() -> rx.Component:
    return rx.container(
        rx.form.root(
            rx.form.field(
                rx.form.label("Message"),
                rx.form.control(
                    rx.input(
                        name="message",
                        type="text",
                        value=State.message,
                        on_change=State.set_message,
                    ),
                    as_child=True,
                ),
                rx.form.message("There was a problem"),
                name="Message"
            ),
            rx.form.submit(
                rx.button("Send message"),
                as_child=True,
            ),
        ),
        rx.text(f"Your message: ", State.message)
    )

app = rx.App()
app.add_page(index)

[abulvenz]

Hi @pglevy,
This seems to be a bug.
When both valueand on_change are defined rx.input() returns a DebounceInput, which should also be allowed by rx.form.control().

[pglevy]

Thanks for the response! I'll look into creating an issue.