The Overlay component is the base for building interactions like Modal and Drawer. It contains all the core features necessary for a great experience.

  • Auto-Focusing
  • Focus Trapping
  • Render in-Place or in-Portal.
  • Press Esc to dismiss
  • Click on the backdrop to dismiss
  • Animations

Important: You must have a focusable element inside of the Overlay.


  {{on "click" this.toggle}}
  Open Overlay

  as |m|
  <div class="bg-white p-8">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <Button {{on "click" this.toggle}}>Close</Button>

Note on Overlays and other portal elements

FormSelect uses Power Select under the hood and has @renderInPlace={{false}} set by default, which will insert the content of the drop-down outside of the Overlay (or Drawer or Modal) and because of that focus-trap will prevent accessing focusable elements (search input) in said Power Select. To solve this you have following options:

  • <Overlay @disableFocusTrap={{true}} /> (not recommended)
  • <FormSelect @renderInPlace={{true}} /> (recommended)



Name Type Default Description
Released under MIT License - Created by Josemar Luedke