useFocusVisible

useFocusVisible helps you determine whether keyboard focus is visible globally. Sometimes standard :focus-visible pseudo-class is not enough. In some cases, you may want to style a wrapper element based on nested input. You can't fully rely on :has() pseudo-class yet, as it is still not fully supported.

Input default behaviour

Most browsers implements :focus-visible pseudo-class to activate on every focus event. It means by default your inputs would get focus ring even if you set them only on focus visible and disabled them on focus. You can see the difference in the example below. Try to focus both inputs using mous and using tab. First input will get focus ring no matter if you click or tab on it, while the second one will get the focus ring only when using tab.

<template>
  <div>
    <label class="inline-block m-2">
      <span>Default focus visible</span>
      <input class="block bg-gray-100 p-2 rounded-md focus:outline-none focus-visible:ring-2" />
    </label>
    <label class="inline-block m-2">
      <span>Custom focus visible</span>
      <input
        :class="['block bg-gray-100 p-2 rounded-md focus:outline-none', { 'focus-visible:ring-2': isFocusVisible }]"
      />
    </label>
  </div>
</template>

<script lang="ts" setup>
import { useFocusVisible } from '@storefront-ui/vue';
const { isFocusVisible } = useFocusVisible({ isTextInput: true });
</script>