useFocusVisible

Tracks whether the focused element should show a “focus visible” indicator — i.e. focus arrived from keyboard navigation, not a pointer. Mirrors the CSS :focus-visible pseudo-class by querying element.matches(':focus-visible') on focus. Spread the returned focus handlers onto your element.

Use this when you only need focus-visible tracking and don’t want the rest of useInteractiveState (hover, press, disabled).

import { useFocusVisible } from '@wire-ui/react'
 
function FocusableButton() {
  const { isFocusVisible, focusProps } = useFocusVisible()
 
  return (
    <button
      {...focusProps}
      data-focus-visible={isFocusVisible ? '' : undefined}
      className="rounded px-3 py-1 data-[focus-visible]:ring-2"
    >
      Tab to me
    </button>
  )
}

Returns