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

useRovingFocus API

API reference for the useRovingFocus composable.

Explore these related pages for additional context and usage patterns.

PageCategory
useRovingFocusSystem
TreeviewDisclosure
useHotkeySystem
useEventListenerSystem
createStepSelection

Functions

useRovingFocus

(items: () => RovingItem[], options?: RovingFocusOptions) => RovingFocusReturn

Options

target

MaybeRefOrGetter<HTMLElement | null | undefined>

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.

onFocus

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

Properties

focusedId

ShallowRef<ID | undefined>

Methods

isTabbable

(id: ID) => boolean

focus

(id: ID) => void

next

() => void

prev

() => void

first

() => void

last

() => void

onKeydown

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

© 2016-1970 Vuetify, LLC
Ctrl+/