Ui.FocusTrap

A component to trap keyboard focus inside itself:

  • When pressing Tab on the last element in the component the focus will go to the first focusable element in the component.
  • When pressing Shift+Tab on the first element in the component the focus will go to the last focusable element in the component.
Demo

You can see a demo of a Ui.FocusTrap below.

Overflown content...
Home
<Ui.FocusTrap>
<Ui.Content>
<Ui.Container orientation="vertical" align="stretch">
<Ui.Textarea value="Some value..."/>
<Ui.Input value="Some value..."/>
<Ui.Button label="Hello!"/>
<div style="height: 100px;overflow: auto;">
<div style="height: 200px;">"Overflown content..."</div>
</div>
<a href="/">"Home"</a>
</Ui.Container>
</Ui.Content>
</Ui.FocusTrap>
Contents
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.