1---
2category: Sensors
3---
4 
5# useFocusWithin
6 
7Reactive utility to track if an element or one of its decendants has focus. It is meant to match the behavior of the `:focus-within` CSS pseudo-class. A common use case would be on a form element to see if any of its inputs currently have focus.
8 
9## Basic Usage
10 
11```vue
12<script setup lang="ts">
13import { useFocusWithin } from '@vueuse/core'
14import { ref, watch } from 'vue'
15 
16const target = ref()
17const { focused } = useFocusWithin(target)
18 
19watch(focused, (focused) => {
20  if (focused)
21    console.log('Target contains the focused element')
22  else
23    console.log('Target does NOT contain the focused element')
24})
25</script>
26 
27<template>
28  <form ref="target">
29    <input type="text" placeholder="First Name">
30    <input type="text" placeholder="Last Name">
31    <input type="text" placeholder="Email">
32    <input type="text" placeholder="Password">
33  </form>
34</template>
35```
36 
37## Type Declarations
38 
39```ts
40export interface UseFocusWithinReturn {
41  /**
42   * True if the element or any of its descendants are focused
43   */
44  focused: ComputedRef<boolean>
45}
46/**
47 * Track if focus is contained within the target element
48 *
49 * @see https://vueuse.org/useFocusWithin
50 * @param target The target element to track
51 * @param options Focus within options
52 */
53export declare function useFocusWithin(
54  target: MaybeElementRef,
55  options?: ConfigurableWindow,
56): UseFocusWithinReturn
57```
58