1---
2category: '@Integrations'
3---
4 
5# useFocusTrap
6 
7Reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap).
8 
9For more information on what options can be passed, see [`createOptions`](https://github.com/focus-trap/focus-trap#createoptions) in the `focus-trap` documentation.
10 
11## Install
12 
13```bash
14npm i focus-trap@^7
15```
16 
17## Usage
18 
19**Basic Usage**
20 
21```vue
22<script setup lang="ts">
23import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
24import { useTemplateRef } from 'vue'
25 
26const target = useTemplateRef('target')
27const { hasFocus, activate, deactivate } = useFocusTrap(target)
28</script>
29 
30<template>
31  <div>
32    <button @click="activate()">
33      Activate
34    </button>
35    <div ref="target">
36      <span>Has Focus: {{ hasFocus }}</span>
37      <input type="text">
38      <button @click="deactivate()">
39        Deactivate
40      </button>
41    </div>
42  </div>
43</template>
44```
45 
46**Multiple Refs**
47 
48```vue
49<script setup lang="ts">
50import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
51import { useTemplateRef } from 'vue'
52 
53const targetOne = useTemplateRef('targetOne')
54const targetTwo = useTemplateRef('targetTwo')
55const { hasFocus, activate, deactivate } = useFocusTrap([targetOne, targetTwo])
56</script>
57 
58<template>
59  <div>
60    <button @click="activate()">
61      Activate
62    </button>
63    <div ref="targetOne">
64      <span>Has Focus: {{ hasFocus }}</span>
65      <input type="text">
66    </div>
67    ...
68    <div ref="targetTow">
69      <p>Another target here</p>
70      <input type="text">
71      <button @click="deactivate()">
72        Deactivate
73      </button>
74    </div>
75  </div>
76</template>
77```
78 
79**Dynamic Focus Target**
80 
81```vue
82<script setup lang="ts">
83import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
84import { computed, shallowRef, useTemplateRef } from 'vue'
85 
86const left = useTemplateRef('left')
87const right = useTemplateRef('right')
88const currentRef = shallowRef<'left' | 'right'>('left')
89 
90const target = computed(() =>
91  currentRef.value === 'left'
92    ? left
93    : currentRef.value === 'right'
94      ? right
95      : null,
96)
97 
98const { activate } = useFocusTrap(target)
99</script>
100 
101<template>
102  <div>
103    <div ref="left" class="left">
104      ...
105    </div>
106    <div ref="right" class="right">
107      ...
108    </div>
109  </div>
110</template>
111```
112 
113**Automatically Focus**
114 
115```vue
116<script setup lang="ts">
117import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
118import { useTemplateRef } from 'vue'
119 
120const target = useTemplateRef('target')
121const { hasFocus, activate, deactivate } = useFocusTrap(target, { immediate: true })
122</script>
123 
124<template>
125  <div>
126    <div ref="target">
127      ...
128    </div>
129  </div>
130</template>
131```
132 
133**Conditional Rendering**
134 
135This function can't properly activate focus on elements with conditional rendering using `v-if`. This is because they do not exist in the DOM at the time of the focus activation. To solve this you need to activate on the next tick.
136 
137```vue
138<script setup lang="ts">
139import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
140import { nextTick, useTemplateRef } from 'vue'
141 
142const target = useTemplateRef('target')
143const { activate, deactivate } = useFocusTrap(target, { immediate: true })
144 
145const show = ref(false)
146 
147async function reveal() {
148  show.value = true
149 
150  await nextTick()
151  activate()
152}
153</script>
154 
155<template>
156  <div>
157    <div v-if="show" ref="target">
158      ...
159    </div>
160 
161    <button @click="reveal">
162      Reveal and Focus
163    </button>
164  </div>
165</template>
166```
167 
168## Using Component
169 
170With the `UseFocusTrap` component, Focus Trap will be activated automatically on mounting this component and deactivated on unmount.
171 
172```vue
173<script setup lang="ts">
174import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
175import { shallowRef } from 'vue'
176 
177const show = shallowRef(false)
178</script>
179 
180<template>
181  <UseFocusTrap v-if="show" :options="{ immediate: true }">
182    <div class="modal">
183      ...
184    </div>
185  </UseFocusTrap>
186</template>
187```
188 
189## Type Declarations
190 
191```ts
192export interface UseFocusTrapOptions extends Options {
193  /**
194   * Immediately activate the trap
195   */
196  immediate?: boolean
197}
198export interface UseFocusTrapReturn {
199  /**
200   * Indicates if the focus trap is currently active
201   */
202  hasFocus: ShallowRef<boolean>
203  /**
204   * Indicates if the focus trap is currently paused
205   */
206  isPaused: ShallowRef<boolean>
207  /**
208   * Activate the focus trap
209   *
210   * @see https://github.com/focus-trap/focus-trap#trapactivateactivateoptions
211   * @param opts Activate focus trap options
212   */
213  activate: (opts?: ActivateOptions) => void
214  /**
215   * Deactivate the focus trap
216   *
217   * @see https://github.com/focus-trap/focus-trap#trapdeactivatedeactivateoptions
218   * @param opts Deactivate focus trap options
219   */
220  deactivate: (opts?: DeactivateOptions) => void
221  /**
222   * Pause the focus trap
223   *
224   * @see https://github.com/focus-trap/focus-trap#trappause
225   */
226  pause: Fn
227  /**
228   * Unpauses the focus trap
229   *
230   * @see https://github.com/focus-trap/focus-trap#trapunpause
231   */
232  unpause: Fn
233}
234/**
235 * Reactive focus-trap
236 *
237 * @see https://vueuse.org/useFocusTrap
238 */
239export declare function useFocusTrap(
240  target: MaybeRefOrGetter<
241    Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>
242  >,
243  options?: UseFocusTrapOptions,
244): UseFocusTrapReturn
245```
246