Skip to main content
Vuetify0 is now in alpha!
Vuetify0 Logo
Theme
Mode
Palettes
Accessibility
Vuetify One
Sign in to Vuetify One

Access premium tools across the Vuetify ecosystem — Bin, Play, Studio, and more.

Not a subscriber? See what's included

useVirtualFocus API

API reference for the useVirtualFocus composable.

Explore these related pages for additional context and usage patterns.

PageCategory
useVirtualFocusSystem
ComboboxForms
useRovingFocusSystem
useEventListenerSystem
createSingleSelection

Functions

useVirtualFocus

(items: () => VirtualFocusItem[], options: VirtualFocusOptions) => VirtualFocusReturn

Options

control required

MaybeRefOrGetter<HTMLElement | null | undefined>

Element that retains DOM focus and receives aria-activedescendant

target

MaybeRefOrGetter<HTMLElement | null | undefined>

Element to attach keydown listener to (defaults to control)

orientation

"horizontal" | "vertical" | "both" | undefined

Arrow key mapping. Ignored when `columns` is set (grid uses all 4 arrows).

circular

boolean | undefined

columns

MaybeRefOrGetter<number> | undefined

Column count for grid navigation. When set, items are treated as a 2D grid in row-major order: Left/Right step +/-1, Up/Down step +/-columns, Home/End go to row start/end, Ctrl+Home/End go to first/last overall.

onHighlight

((id: ID) => void) | undefined

Properties

highlightedId

ShallowRef<ID | undefined>

Methods

highlight

(id: ID) => void

clear

() => void

next

() => void

prev

() => void

first

() => void

last

() => void

onKeydown

(e: KeyboardEvent) => void
Was this page helpful?

© 2016-1970 Vuetify, LLC
Ctrl+/