Vue Vue Focus Trap Component API

Vue Focus Trap API

Explore the API reference for the Vue Vue Focus Trap component and discover how to effectively utilize its props for customization.

On this page

jsx

import { CFocusTrap } from '@coreui/vue-pro'

Property	Default	Type
active	`true`	`boolean`
Controls whether the focus trap is active or inactive. When `true`, focus will be trapped within the child element. When `false`, normal focus behavior is restored.
additionalContainer	`undefined`	`Ref<HTMLElement`, `null>`
Additional container elements to include in the focus trap. Useful for floating elements like tooltips or popovers that are rendered outside the main container but should be part of the trap.
focusFirstElement	`false`	`boolean`
Controls whether to focus the first selectable element or the container itself. When `true`, focuses the first tabbable element within the container. When `false`, focuses the container element directly. This is useful for containers that should receive focus themselves, such as scrollable regions or custom interactive components.
restoreFocus	`true`	`boolean`
Automatically restores focus to the previously focused element when the trap is deactivated. This is crucial for accessibility as it maintains the user's place in the document when returning from modal dialogs or overlay components. Recommended to be `true` for modal dialogs and popover components.

Event name
activate
Emitted when the focus trap becomes active. Useful for triggering additional accessibility announcements or analytics.
deactivate
Emitted when the focus trap is deactivated. Can be used for cleanup, analytics, or triggering state changes.