Progressively Enhanced Fullstack forms

[ealmloff]

Specific Demand

It would be nice if dioxus provided a type safe form that works with the router and dioxus fullstack server functions.

Implement Suggestion

#[derive(Variants)]
enum Options {
    #[variant("first-option")]
    First,
    #[variant("second-option")]
    Second,
}

#[derive(Form)]
struct FormData {
    #[hint = "enter your username"]
    username: String,
    #[hint = "enter your password"]
    password: String,
    #[default = Option::Second]
    dropdown: Options,
    checkable: bool
}

#[server]
fn server(data: FormData) -> Result<()> {
    todo!()
}

let data = use_form::<FormData>();

// You can read form values easily before the form is submitted
let checkable_class = if data.read().checkable { "checked" } else { "unchecked" };

rsx! {
    Form {
        action: server,
        input {
            // You can spread fields to automatically add listeners
            ..data.username()
        }
        input {
            // You can style and layout forms however you want to
            class: "ring-1 ring-inset ring-gray-300",
            ..data.password()
        }
        select {
            ..data.dropdown()
        }
    }
}

[jkelleyrtp]

I like the API you have with the spreading!