Attach modals to keyboard shortcuts, allowing for easy toggling and improved user interaction.
The Command component is a web component built from scratch to allow developers to bind a keyboard shortcut and toggle a modal.
To get started, simply use the <uk-command> markup in your HTML code with one <select data-fn="data-source" hidden></select> tag as items reference.
By default, no keyboard shortcuts are bound. To enable a keyboard shortcut, simply add the key attribute to your Command component.
Since we are using the UIkit modal behind the scenes, we can use any element to toggle a Command component. To start, simply add the toggle attribute to the <uk-command> element. Then, you can use an <a> element linked to the toggle ID like this: <a href="#TOGGLE" data-uk-toggle>. If you are using another element, such as a button, just add the data-uk-toggle="target: #TOGGLE" attribute to toggle the Command component.
By default, the command palette component does not perform any action when an item is selected or clicked. This allows for flexibility in handling user input. To respond to user input, you need to manually attach an event listener to the component specifically to the uk-command:click event.
You can try out this example by checking your browser’s developer console. When you select an item from the command palette, the selected value will be logged to the console. From there, you can handle the value as needed to respond to the user’s input.
Sometimes, there are elements that have related keywords that may be slightly off or awkward when included as anchor tags. For these use cases, we can leverage the data-keywords attribute.
For example, if we have a “Form” link but also want it to appear when users search for terms like “checkbox,” “input,” “toggle switch,” etc., we can simply add a comma-separated list of terms like this: data-keywords="checkbox,input,radio"
To group related elements, simply use the optgroup tag and items will be automatically sorted and grouped with headers.
Sometimes, we may want to disable items. To do this, simply use the disabled attribute, and the item will be automatically disabled.
Display keyboard shortcuts next to commands and allow users to execute them while the modal is open.
Use data-key and data-modifier attributes on <options> tag to define shortcuts:
Available modifiers: ctrl, alt, shift, meta
The Command component supports internationalization through multiple methods with the following priority order (highest to lowest):
i18n attribute or script tag)<script id="uk-i18n">)| Key | Default | Description |
|---|---|---|
placeholder | Search commands… | Placeholder text for search input |
search-label | Search | ARIA label for search input |
list-label | Commands | ARIA label for commands list |
close-label | Close | ARIA label for close button |
modal-label | Command palette | ARIA label for modal dialog |
escape-button-label | Esc | Text displayed on escape button |
The Command component supports custom CSS classes and inline styles through the cls and stl attributes.
| Target | Description |
|---|---|
modal | The modal wrapper element |
dialog | The modal dialog container |
header | The search header section |
header-icon | The search icon container |
header-input | The search input wrapper |
header-esc | The escape button wrapper |
list | The commands list (ul element) |
item | Individual command item (li element) |
item-header | Group header for grouped commands |
item-link | The clickable link/button inside each command |
item-wrapper | Wrapper for command content (icon + text + shortcut) |
item-icon | Icon element for commands with icons |
item-text | Text label for the command |
item-key | Keyboard shortcut display |
item-subtitle | Subtitle/description text for commands |
escape-button | The Esc button in the header |
The following attributes are available for this component:
| Name | Type | Default | Description |
|---|---|---|---|
key | String | Keyboard key used with modifier to toggle the command palette (e.g., “k” for Ctrl+K). | |
modifier | String | ctrl | Modifier key used with key attribute. Options: ctrl, alt, shift, meta. |
toggle | String | ID for the modal element. Used for manual toggling via data-uk-toggle attribute or UIkit modal API. | |
cls | String | Custom CSS classes. Can be simple string or JSON object for targeting specific elements. | |
stl | String | Custom inline styles. Can be simple string or JSON object for targeting specific elements. | |
i18n | String | Internationalization strings as JSON object or via configuration script. | |
force-prevent-rerender | Boolean | false | Prevents component rerendering (useful for HTMX or SPA scenarios). |
The Command component triggers the following events on elements with this component attached:
| Name | Description |
|---|---|
uk-command:click | Fired when a command is selected or clicked. Event detail contains {value: OptionItem}. |
uk-command:search | Fired when the search term changes. Event detail contains {value: string}. |