Focus Containers

This component is really just useful when you need to trap the focus within some container. The most common example is within Dialogs. This only traps the keyboard navigation, so a user can actually still click outside of it.

This example will show how you can trap keyboard focus inside of a form. The tab focus will only be allowed on non-disabled cells and components that are considered tabbable.

A few components use this behind the scenes for keyboard accessibility.



The keyboard focus containment can be disabled by clicking the following button.