1---
2category: Sensors
3---
4 
5# useFocus
6 
7Reactive utility to track or set the focus state of a DOM element. State changes to reflect whether the target element is the focused element. Setting reactive value from the outside will trigger `focus` and `blur` events for `true` and `false` values respectively.
8 
9## Basic Usage
10 
11```ts
12import { useFocus } from '@vueuse/core'
13 
14const target = shallowRef()
15const { focused } = useFocus(target)
16 
17watch(focused, (focused) => {
18  if (focused)
19    console.log('input element has been focused')
20  else console.log('input element has lost focus')
21})
22```
23 
24## Setting initial focus
25 
26To focus the element on its first render one can provide the `initialValue` option as `true`. This will trigger a `focus` event on the target element.
27 
28```ts
29import { useFocus } from '@vueuse/core'
30 
31const target = shallowRef()
32const { focused } = useFocus(target, { initialValue: true })
33```
34 
35## Change focus state
36 
37Changes of the `focused` reactive ref will automatically trigger `focus` and `blur` events for `true` and `false` values respectively. You can utilize this behavior to focus the target element as a result of another action (e.g. when a button click as shown below).
38 
39```vue
40<script setup lang="ts">
41import { useFocus } from '@vueuse/core'
42import { shallowRef } from 'vue'
43 
44const input = shallowRef()
45const { focused } = useFocus(input)
46</script>
47 
48<template>
49  <div>
50    <button type="button" @click="focused = true">
51      Click me to focus input below
52    </button>
53    <input ref="input" type="text">
54  </div>
55</template>
56```
57 
58## Type Declarations
59 
60```ts
61export interface UseFocusOptions extends ConfigurableWindow {
62  /**
63   * Initial value. If set true, then focus will be set on the target
64   *
65   * @default false
66   */
67  initialValue?: boolean
68  /**
69   * Replicate the :focus-visible behavior of CSS
70   *
71   * @default false
72   */
73  focusVisible?: boolean
74  /**
75   * Prevent scrolling to the element when it is focused.
76   *
77   * @default false
78   */
79  preventScroll?: boolean
80}
81export interface UseFocusReturn {
82  /**
83   * If read as true, then the element has focus. If read as false, then the element does not have focus
84   * If set to true, then the element will be focused. If set to false, the element will be blurred.
85   */
86  focused: WritableComputedRef<boolean>
87}
88/**
89 * Track or set the focus state of a DOM element.
90 *
91 * @see https://vueuse.org/useFocus
92 * @param target The target element for the focus and blur events.
93 * @param options
94 */
95export declare function useFocus(
96  target: MaybeElementRef,
97  options?: UseFocusOptions,
98): UseFocusReturn
99```
100