Search Footer

Search component

<loquix-search-footer> is the strip of keyboard hints along the bottom of a search surface — the row that teaches Enter, arrow keys, and Escape without a tooltip.

loquix-search-footershortcut listtrailing actions slot

Preview

Shortcut row Live component

Usage

import '@loquix/core/define/define-search-footer';

const footer = document.querySelector('loquix-search-footer');

footer.shortcuts = [
  { key: 'Enter', label: 'Search' },
  { key: 'Cmd Enter', label: 'Ask AI' },
  { key: 'Esc', label: 'Close' },
];

The component renders the hints. Binding the actual keys stays in your code, so the labels never drift out of sync on their own — keep the two together when you change a binding.

The shortcut object

Field	Type	Required	Description
key	string	yes	Key or chord, such as Enter or Cmd Enter.
label	string	yes	What the key does, such as Search.

Properties

Property	Attribute	Type	Default	Description
shortcuts	—	SearchShortcut[]	[]	The shortcuts to display. Property-only.
label	label	string	localized	Accessible label override.

Slots

Slot	Purpose
actions	Trailing controls or status text, aligned to the end of the row.

CSS parts

Part	Purpose
footer	Outer container.
shortcuts	The shortcut list.
shortcut	A single shortcut item.
key	Key or chord.
label	Action label.
actions	Container for the slotted trailing actions.

Both Search Dialog and Search Panel embed this footer, so you usually set shortcuts on those instead of using it directly.