Form Layouts

Vertical Layout (Default)

page.Form(form => {
    form.Input("name", input => input.Label("Name"));
    form.Input("email", input => input.Label("Email").Type(InputType.Email));
});

Horizontal Layout

page.Form(form => {
    form.Settings(s => s.Horizontal().End());
    form.Input("name", input => input.Label("Name"));
});

Grid Layout

Place form fields in a grid for multi-column forms:

page.Form(form => {
    form.Section("Profile", section => {
        section.Row(row => {
            row.Columns(6);
            row.Col(col => {
                col.Input("first", input => input.Label("First Name"));
            });
            row.Col(col => {
                col.Input("last", input => input.Label("Last Name"));
            });
        });
    });
});

Floating Labels

new TablerInput("email").Label("Email Address").Floating()

Form Sections

Group related fields with sections:

page.Form(form => {
    form.Section("Personal Information", section => {
        section.Row(row => {
            row.Col(col => {
                col.Input("name", input => input.Label("Name"));
            });
            row.Col(col => {
                col.Input("email", input => input.Label("Email").Type(InputType.Email));
            });
        });
    });
});