BlazorNova
BlazorNovaBnEditForm
BnEditForm is the foundation of the BlazorNova form system. It wraps the standard Blazor
EditForm and adds a 12-column CSS grid layout, cascading form state, and a monitor-based
validation system that gives you fine-grained control over errors, warnings, visibility, and interactivity
of every field.
12-Column Grid Layout
The form renders as a 12-column CSS grid. By default, every form control spans all 12 columns
(full width). Use ContainerModifier on any control to change how many columns it occupies.
Each form control renders 3 rows within its grid cell:
- Label row — the field label, required indicator (*), and optional help tooltip.
- Control row — the actual input element with optional prefix and suffix areas.
- Validation row — monitor messages (errors, warnings, success) appear here.
This 3-row layout ensures consistent vertical alignment across all fields, even when some fields show validation messages and others don't.
Responsive Design
Use the responsive breakpoint helpers on ContainerModifier to create layouts that adapt
to different screen sizes. Controls default to col_span_12 (full width) and you can
override at each breakpoint using .Sm(), .Md(), .Lg(),
.XL(), and .XXL().
In this example each field is full-width on small screens, 2 per row at Md (6 of 12 columns),
and 4 per row at XL (3 of 12 columns). Resize your browser to see it in action.