Overlay Form
An opinionated EditForm wrapper for service-driven overlays. It bakes in the flex-column, scrolling-body, sticky-footer shape that an EditForm inside a Sheet or Dialog otherwise loses.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <OverlayForm />
16 tests across 4 files. Auto-generated from the test suite.
When to Use
- An edit or create form rendered inside a Sheet, Drawer, or Dialog opened via the Overlay Service
- Long forms where the body should scroll independently while the submit/cancel buttons stay pinned to the bottom
- Anywhere you would otherwise re-create the flex-col + min-h-0 + sticky-footer layout by hand
Renders an empty shell until Model is set
The EditContext is deferred until a non-nullModel is supplied — EditForm crashes on a null model, so OverlayForm renders nothing visible rather than throwing. If your form looks empty, check that Model is assigned before the overlay renders.
Assign an existing record to Model to prefill the fields; OnValidSubmit can await a service call while the submit Button shows its loading state.
Inside a service-driven overlay
The common case is a content component shown via OverlayService.
Because OverlayForm fills its container with flex flex-col h-full min-h-0, the body scrolls and the footer pins to the bottom edge of the sheet automatically.
// Open the content component as a sheet:
await Overlay.ShowSheetAsync<EditContactSheet>(title: "Edit contact");
// EditContactSheet.razor
<OverlayForm Model="@_model" OnValidSubmit="HandleSave">
<Body>
@* ...fields... *@
</Body>
<Footer>
<Button Variant="Button.ButtonVariant.Outline" OnClick="Cancel">Cancel</Button>
<Button Type="Button.ButtonType.Submit">Save</Button>
</Footer>
</OverlayForm>API Reference
OverlayForm
| Prop | Type | Default | Description |
|---|---|---|---|
| Model* | object? | — | The object the form edits. Required — the EditContext is deferred until this is supplied, and a diagnostic renders instead of crashing when it's missing. |
| Header | RenderFragment? | — | Content pinned above the scrollable body (e.g. a title or intro text). |
| Body | RenderFragment? | — | The form's fields, rendered inside an independently-scrolling region. |
| Footer | RenderFragment? | — | Content pinned below the scrollable body, above a top border (typically Cancel/Save buttons). |
| Validator | RenderFragment? | — | Override the default DataAnnotationsValidator with a custom validator (e.g. FluentValidationValidator). |
| Class | string? | — | Additional CSS classes merged onto the root EditForm element (composed with, not overwritten by, the baked-in flex/scroll structure). |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the root EditForm element. |
Events
| OnValidSubmit | EventCallback<EditContext> | Invoked when the form is submitted and passes validation. |
| OnInvalidSubmit | EventCallback<EditContext> | Invoked when the form is submitted and fails validation. |
Related
- Overlay Service — Shows components like this inside a Sheet, Drawer, or Dialog
- Long Forms in Sheets — The layout pattern OverlayForm encapsulates
- Form — General form composition outside of overlays
- EditForm + Lumeo — Using Blazor's EditForm with Lumeo inputs