Keyboard reference

This page lists the keys each interactive component handles. Native elements (buttons, links, inputs) behave as the browser defines, so the tables for those components state native behaviour. For focus behaviour and what you must provide, see the Accessibility section on each component page, and the Accessibility overview.

Non-interactive components (Badge, Card, Container, Divider, Grid, Progress, Skeleton, Spinner, Stack, Avatar) add no keyboard behaviour. A responsive Table adds only a focusable scroll container, which the arrow keys scroll. Form Field adds none either; keys go to the control inside it.

Common keys

Key	Action
Tab	Moves focus to the next focusable element
Shift + Tab	Moves focus to the previous focusable element

Accordion

Accordion component page

Key	Action
Tab	Moves between item header buttons
Enter, Space	Expands or collapses the focused item

Alert

Alert component page. Only applies when dismissible is set.

Key	Action
Enter, Space	Activates the dismiss button

Breadcrumb

Breadcrumb component page

Key	Action
Tab	Moves between breadcrumb links
Enter	Follows the focused link

Button, Icon Button and Button Group

Button, Icon Button, Button Group

Key	Action
Tab	Moves between buttons (each is a tab stop)
Enter, Space	Activates the focused button

Carousel

Carousel component page

Key	Action
Tab	Moves between the previous, next and indicator buttons
Enter, Space	Activates the focused button
ArrowRight	Next slide
ArrowLeft	Previous slide
Home	First slide
End	Last slide

Arrow, Home and End keys work while focus is anywhere inside the carousel.

Checkbox

Checkbox component page

Key	Action
Space	Toggles the checkbox

Details

Details component page

Key	Action
Enter, Space	Toggles the section open or closed

Dialog and Drawer

Dialog, Drawer

Key	Action
Tab	Next focusable element inside, wrapping at the end
Shift + Tab	Previous focusable element inside, wrapping at the start
Esc	When dismissible, closes the dialog or drawer and returns focus to the element that opened it
Enter, Space	Activates the focused button

Link

Link component page

Key	Action
Enter	Follows the link

List (interactive)

List component page. Only applies when interactive is set on holo-list.

Key	Action
Tab	Moves between items (each is a tab stop)
Enter, Space	Selects the focused item (native button)

Menu

Menu component page

Key	Action
Enter, Space	On a button trigger: opens the menu. On an item: selects it
ArrowDown	On the trigger: opens and focuses the first item. In the menu: next item (wraps)
ArrowUp	On the trigger: opens and focuses the last item. In the menu: previous item (wraps)
Home	First item
End	Last item
Esc	Closes the menu and returns focus to the trigger

There is no type-ahead. Disabled items are skipped.

Pagination

Pagination component page

Key	Action
Tab	Moves between the previous, page and next buttons
Enter, Space	Goes to the focused page

Popover

Popover component page

Key	Action
Enter, Space	On a button trigger: opens or closes the popover. Opening moves focus into the panel
Tab	Moves on in page order. The panel follows the trigger
Esc	Closes the popover and returns focus to the trigger

Radio group

Radio component page

Key	Action
Tab	Moves focus into the group (checked radio, or first) and out of it
ArrowDown, ArrowRight	Next enabled radio (wraps), and selects it
ArrowUp, ArrowLeft	Previous enabled radio (wraps), and selects it
Home	First enabled radio, and selects it
End	Last enabled radio, and selects it
Space, Enter	Selects the focused radio

Disabled radios are skipped.

Select

Select component page. This is a native <select>, so details vary by browser and platform.

Key	Action
ArrowDown, ArrowUp	Changes the value or moves through the open list
Enter, Space	Opens the list and confirms a choice
Letter keys	Jump to a matching option
Esc	Closes the open list

Slider

Slider component page. This is a native <input type="range">.

Key	Action
ArrowRight, ArrowUp	Increases the value by one step
ArrowLeft, ArrowDown	Decreases the value by one step
Home	Sets the minimum
End	Sets the maximum
PageUp, PageDown	Larger increase or decrease (browser dependent)

Switch

Switch component page

Key	Action
Space, Enter	Toggles the switch

Tabs

Tabs component page

Key	Action
Tab	Moves into the tab list (selected tab), then to the active panel
ArrowRight	Next enabled tab (wraps)
ArrowLeft	Previous enabled tab (wraps)
Home	First enabled tab
End	Last enabled tab
Enter, Space	Activates the focused tab

With activation="automatic" (the default), moving focus also selects the tab. With activation="manual", press Enter or Space to select. ArrowUp and ArrowDown are not handled.

Tag (removable)

Tag component page. Only applies when removable is set.

Key	Action
Enter, Space	Activates the remove button

Text Field and Textarea

Text Field, Textarea. Both are native text controls.

Key	Action
Typing and editing keys	Native text editing
Enter	In a Textarea, inserts a new line

Toast

Toast component page

Key	Action
Tab	Moves focus to a toast’s dismiss button
Enter, Space	Dismisses the toast

Focus inside a toast pauses its auto-dismiss timer.

Tooltip

Tooltip component page

Key	Action
Tab	Focusing the trigger shows the tooltip. Moving away hides it
Esc	Hides the tooltip while it is visible

Visually Hidden (focusable)

Visually Hidden component page. Only applies when focusable is set.

Key	Action
Tab	Focuses the child, revealing the content (for example a skip link)
Enter	Activates the focused child