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 />
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
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