/

All things Focusable

Components

FocusablePress Tab or click to shift focus to any React element. This abstract component standardizes focus behavior across different browsers.

Examples

Warning on Dialog hidePreventing users from accidentally closing a modal Dialog component with unsaved changes by displaying a nested confirmation dialog.

Dialog with React RouterUsing React Router to create a modal Dialog that's controlled by the browser history.

API Reference

FocusableRenders a focusable element. When this element gains keyboard focus, it gets a data-focus-visible attribute and triggers the onFocusVisible prop.

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠