On this page

Overlay form

Focused edits belong in an overlay so the page underneath stays visible. r-modal traps focus and locks scroll; r-popover suits lightweight panels anchored to a control. Both accept the same form fields—r-input, r-select, and r-checkbox participate in native <form> submission via Form-Associated Custom Elements.

Edit settings
Member Admin Email me about updates
Cancel

Submit uses serializeForm() from ranui when you need a plain object; the demo closes on save without a network call.

Popover variant

For a single field or a short confirm, anchor r-popover to the trigger and keep the same <form> markup inside. Popovers do not lock the page; use a modal when the task needs uninterrupted focus or several fields.

References

  • Form — field layout and serializeForm
  • Modal — open, focus trap, imperative helpers
  • Popover — placement and dismissal