Component Form

Form

A composite that owns field values + errors and routes them to a single on_submit callback. The body of the form is built by child(...) calls passing field components (text inputs, selects, etc.).

Import

use yororen_ui::headless::form::form;

Minimal example

use yororen_ui::headless::form::form;
use yororen_ui::headless::text_input::text_input;
use yororen_ui::headless::label::label;

form("login", cx)
    .value("email", self.email.clone())
    .error("email", self.email_error.clone())
    .on_submit({
        let entity = cx.entity();
        move |values, _window, cx| {
            entity.update(cx, |s, _cx| {
                s.email = values.get("email").cloned().unwrap_or_default();
                s.submitted = true;
            });
        }
    })
    .submit("Sign in")
    .child(text_input("email-field").placeholder("you@example.com").render(cx, window))
    .child(label("email-hint", "Use your work email.", cx).render(cx))
    .render(cx)

Props

Method	Purpose
value(field, v)	Set the current value of field (a SharedString-able name).
error(field, e)	Set the current error message for field.
on_submit(closure)	Fn(HashMap<String, String>, &mut Window, &mut App) + 'static + Send + Sync. Fired when the form is submitted with the merged field values.
submit(label)	Add an auto-rendered submit button with the given label.
submit_button(cx)	Returns Option<AnyElement> — a pre-wired submit button (or None if submit was not set).
trigger_submit(w, cx)	Programmatically submit (e.g. from a keyboard shortcut).

The body is built by .child(...) (the standard Div chain).

Notes

• Factory takes (id, _cx).
• No state entity — the parent view owns the values + errors (typically as HashMap<String, String>).
• The on_submit callback receives a fresh HashMap<String, String> with the latest field values (the form gathers them from the children's state at submit time).
• The submit(...) builder adds a button to the form's children; you do not need to add it yourself. Use submit_button(cx) to get a handle to it (e.g. to control focus).
• .render(cx) returns Stateful<Div>.

See also

TextInput, Form (next-steps), Modal