dash_pydantic_form_auto_generated_model_form_with_mantine.py

1from dash import Dash, html, Input, Output, State, callback
2import dash_mantine_components as dmc
3from pydantic import BaseModel, Field
4from dash_pydantic_form import ModelForm
5
6# Define your data model
7class UserProfile(BaseModel):
8    name: str = Field(description="Full Name")
9    age: int = Field(gt=0, description="Age in years")
10    email: str = Field(pattern=r".*@.*", description="Email address")
11
12app = Dash(__name__)
13
14# Create the form component
15form = ModelForm(
16    model=UserProfile,
17    id="user-form",
18)
19
20app.layout = dmc.MantineProvider(
21    dmc.Container([
22        html.H1("Dash Pydantic Form Quickstart"),
23        form,
24        dmc.Button("Submit", id="submit-btn", mt="md"),
25        html.Div(id="output-div", style={"marginTop": "20px"})
26    ], p="md")
27)
28
29@callback(
30    Output("output-div", "children"),
31    Input("submit-btn", "n_clicks"),
32    State("user-form", "data"),
33    prevent_initial_call=True,
34)
35def display_output(n_clicks, form_data):
36    if form_data:
37        return html.Pre(f"Form Data: {form_data}")
38    return "No data submitted yet."
39
40if __name__ == "__main__":
41    app.run_server(debug=True)