Skip to content

leptos-form/leptos_form

Repository files navigation

leptos_form: Derive leptos forms from rust structs

Documentation

Features

  • Automatic form parsing -- focus on how your data is represented and not on how to get it in and out of html
  • Easy specification of label and input classes, great for Tailwind integration
  • Labels are derived from struct fields and can be given form-wide casing
  • DOM layout customization through attributes
  • Integration with popular crates

Crate features

This crate offers the following features, all of which are not activated by default:

  • bigdecimal: Provides impls for BigDecimal
  • cache-local-storage: Provides support for writing intermediate form data to/from local storage.
  • cache-serde_json: Provides support for (de)serializing form state as JSON.
  • chrono: Provides impls for DateTime, NaiveDate, NaiveDateTime
  • num-bigint: Provides impls for BigInt and BigUint
  • uuid: Provides impls for Uuid

Example

mod my_crate {
    use leptos::*;
    use leptos_form::prelude::*;
    use serde::*;

    #[derive(Clone, Debug, Default, Deserialize, Form, Serialize)]
    #[form(
        component(
            action = create_my_data(my_data),
            on_success = |DbMyData { id, .. }, _| view!(<div>{format!("Created {id}")}</div>),
            reset_on_success,
        ),
        label(wrap(class = "my-class", rename_all = "Title Case")),
    )]
    pub struct MyData {
        pub my_name: String,
    }

    #[derive(Clone, Debug, Deserialize, Serialize)]
    pub struct DbMyData {
        pub id: i32,
        pub name: String,
    }

    #[component]
    pub fn MyComponent() -> impl IntoView {
        view! {
            <MyData
                initial={MyData::default()}
                top=|| view!(<input type="button" value="Submit" />)
            />
        }
    }

    #[server]
    async fn create_my_data(my_data: MyData) -> Result<DbMyData, ServerFnError> {
        todo!()
    }
}