The useFocusLock hook traps focus within the given element such that when a user Tab or Shift+Tabs, focus is only cycled through nodes contained within that element.

This is of particular relevance when constructing modals. Consider the situation where you tab past the last element in a modal. Without trapping the focus within the dialog, focus moves into a part of the page that you can't click without closing the modal.


import { useFocusLock } from "@artsy/palette"

const Example = (props) => {
  const containerEl = useRef<HTMLDivElement | null>(null)


  return (
      <input placeholder="Cannot tab into" />

      <Box ref={containerEl}>
        <input placeholder="First tabstop" />
        <input placeholder="Second tabstop" />
        <button>Third tabstop</button>
On this page