# Overlay Form Source: https://lumeo.nativ.sh/components/overlay-form # 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 Renders an empty shell until Model is set The EditContext is deferred until a non-null `Model` 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. Preview Code Basic Overlay Form ### Edit contact Name Email Notes Cancel Save Copy Code ## Inside a service-driven overlay The common case is a content component shown via [OverlayService](/components/overlay-service). 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(title: "Edit contact"); // EditContactSheet.razor @\* ...fields... \*@
## API Reference ### OverlayForm Property Type Default Description Model object? — The form model. Required — until set, the component renders an empty shell. OnValidSubmit EventCallback — Fires when the form is submitted and validation passes. OnInvalidSubmit EventCallback — 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 - [Overlay Service](/components/overlay-service) — Shows components like this inside a Sheet, Drawer, or Dialog - [Long Forms in Sheets](/docs/long-forms-in-sheets) — The layout pattern OverlayForm encapsulates - [Form](/components/form) — General form composition outside of overlays - [EditForm + Lumeo](/docs/edit-form) — Using Blazor's EditForm with Lumeo inputs