All Components

Keyboard Navigation

The keyboard navigation of the ButtonGroup is always available.

The ButtonGroup supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Left Arrow Highlights the button to the left.
Right Arrow Highlights the button to the right.
Enter or Space Triggers the select event.

The following example demonstrates how to enable the keyboard navigation of the ButtonGroup.

<div id="vueapp" class="vue-app">
    <div class="row">
        <kendo-buttongroup :index="0">
            <kendo-buttongroup-button data-icon="globe">Option 1</kendo-buttongroup-button>
            <kendo-buttongroup-button data-icon="user">Option 2</kendo-buttongroup-button>
            <li>Ordinary LI item</li>
        </kendo-buttongroup>
    </div>
</div>
Vue.use(ButtonsInstaller);

new Vue({
    el: "#vueapp"  
})
In this article