Lumeo

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.

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

Edit contact

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

Property Type Default Description
Model object? — The form model. Required — until set, the component renders an empty shell.
OnValidSubmit EventCallback<EditContext> — Fires when the form is submitted and validation passes.
OnInvalidSubmit EventCallback<EditContext> — Fires when the form is submitted but validation fails.
Header RenderFragment? — Optional non-scrolling header region above the body.
Body RenderFragment? — The scrollable form fields region.
Footer RenderFragment? — Optional sticky footer for submit / cancel actions.
Validator RenderFragment? DataAnnotationsValidator Override the default validator (e.g. a FluentValidationValidator).
Class string? — Additional CSS classes appended to the form's flex container.

Related