Skip to content
On this page

Auto Focus

If you need to automatically focus on internal links or form elements and lock focus inside when opening a popover, you can use the Headless UI <FocusTrap> component (although it is not documented in the Headless UI documentation):

import {
} from '@headlessui/react'
import { Float } from '@headlessui-float/react'

  <Float offset={4}>
    <Popover.Button className="px-3 py-1.5 flex justify-center items-center bg-rose-50 hover:bg-rose-100 text-rose-500 rounded">

    <Popover.Panel className="w-[240px] h-[70px] p-3 bg-white text-rose-500 border border-gray-200 rounded-md shadow-lg focus:outline-none">
        <button type="button" className="focus:ring">link 1</button>
        <button type="button" className="focus:ring">link 2</button>

Released under the MIT License.