Layout & field types

Forms are not always one field per row. Set Columns on the definition and ColumnSpan on individual fields to get a responsive grid that collapses to a single column on small screens. This form also shows a [Flags] enum and a plain List<TEnum> rendering as multi-selects, plus a typed nested object group.

Live form

View source

@page "/layout"

<BormView Definition="_schema" Model="_model" OnValidSubmit="HandleSubmit"
          SubmitText="Save profile" ShowResetButton="true" />

@code {
    private readonly Profile _model = new();
    private BormDefinition _schema = default!;

    protected override void OnInitialized()
    {
        _schema = BormBuilder.For<Profile>()
            .Title("Your profile")
            .Columns(2)
            .Field(x => x.FirstName, f => f.Autocomplete("given-name").Autofocus())
            .Field(x => x.LastName, f => f.Autocomplete("family-name"))
            .Field(x => x.Email, f => f.Autocomplete("email"))
            .Field(x => x.Phone, f => f.Autocomplete("tel").InputMode("tel"))
            // A [Flags] enum becomes a multi-select automatically.
            .Field(x => x.Availability, f => f.ColumnSpan(2))
            // …and so does a plain List<TEnum>: the answers are a closed set either way, so it is a
            // set of tick boxes rather than a repeater of dropdowns.
            .Field(x => x.ContactMethods, f => f.ColumnSpan(2))
            .Object(x => x.Address, a => a
                .Columns(2)
                .Field(p => p.Street, f => f.ColumnSpan(2).Autocomplete("street-address"))
                .Field(p => p.City, f => f.Autocomplete("address-level2"))
                .Field(p => p.PostCode, f => f.Autocomplete("postal-code"))
                .Field(p => p.Country, f => f.ColumnSpan(2).Autocomplete("country-name")),
                f => f.ColumnSpan(2).Attr("columns", 2))
            .Field(x => x.Bio, f => f.AsTextArea(4).ColumnSpan(2).Help("Tell us a little about yourself."))
            .Build();
    }
}

Edit this page on GitHub