focus-trap demo

Return to the repository

In the demos below, you'll be able to tell that a focus trap is active because it will turn pink. You should also be able to tell because it will trap your focus!

When a trap is active, you can deactivate it by pushing its deactivate button or, if the demo allows, hitting Escape.

default behavior

Here is a focus trap with some focusable parts.

initial element, no escape

When this focus trap activates, focus jumps to a specific, manually specified element.

Also, in this demo the Escape key does not deactivate the focus trap. You must click the button.

Here is a focus trap with some focusable parts.