Command

Attach modals to keyboard shortcuts, allowing for easy toggling and improved user interaction.

Usage

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.

Adding command items

You can add items by simply adding a plain old <a> tag. Franken WC will parse items behind the scenes.

<uk-command uk-cloak>
  <!-- ... -->
  <a href="#" data-group="Suggestions">
    <uk-lucide custom-class="mr-2" icon="calendar"></uk-lucide>
    <span>Calendar</span>
  </a>
  <a href="#" data-group="Suggestions">
    <uk-lucide custom-class="mr-2" icon="smile"></uk-lucide>
    <span>Search Emoji</span>
  </a>
  <a data-group="Suggestions">
    <uk-lucide custom-class="mr-2" icon="calculator"></uk-lucide>
    <span>Calculator</span>
  </a>
  <!-- ... -->
</uk-command>

Binding a keyboard shortcut

By default, no keyboard shortcuts are bound. To enable a keyboard shortcut, simply add the key attribute to your Command component.

Copy to clipboard
  • Press ⌘ J
    Calendar Search Emoji Commits Profile Billing Settings 
  • <div class="uk-text-small uk-text-muted uk-text-center">
  Press <kbd class="uk-kbd">⌘ J</kbd>
</div>

<uk-command key="j" uk-cloak>
  <a href="#" data-group="Suggestions">
    <span
      class="uk-margin-small-right"
      uk-icon="ratio: 0.8; icon: calendar"
    ></span>
    <span>Calendar</span>
  </a>
  <a href="#" data-group="Suggestions">
    <span
      class="uk-margin-small-right"
      uk-icon="ratio: 0.8; icon: happy"
    ></span>
    <span>Search Emoji</span>
  </a>
  <a data-group="Suggestions">
    <span
      class="uk-margin-small-right"
      uk-icon="ratio: 0.8; icon: git-branch"
    ></span>
    <span>Commits</span>
  </a>
  <a href="#" data-group="Settings">
    <span class="uk-margin-small-right" uk-icon="ratio: 0.8; icon: user"></span>
    <span>Profile</span>
  </a>
  <a href="#" data-group="Settings">
    <span
      class="uk-margin-small-right"
      uk-icon="ratio: 0.8; icon: credit-card"
    ></span>
    <span>Billing</span>
  </a>
  <a href="#" data-group="Settings">
    <span class="uk-margin-small-right" uk-icon="ratio: 0.8; icon: cog"></span>
    <span>Settings</span>
  </a>
</uk-command>

Using a toggle

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" uk-toggle>. If you are using another element, such as a button, just add the uk-toggle="target: #TOGGLE" attribute to toggle the Command component.

Copy to clipboard
  • Toggle
    Calendar Search Emoji Commits Profile Billing Settings 
  • <div>
  <a href="#cmd" uk-toggle>Toggle</a>
  <button
    class="uk-button uk-button-primary uk-margin-small-left"
    uk-toggle="target: #cmd"
  >
    Button
  </button>
</div>

<uk-command toggle="cmd" uk-cloak>
  <a href="#" data-group="Suggestions">
    <span
      class="uk-margin-small-right"
      uk-icon="ratio: 0.8; icon: calendar"
    ></span>
    <span>Calendar</span>
  </a>
  <a href="#" data-group="Suggestions">
    <span
      class="uk-margin-small-right"
      uk-icon="ratio: 0.8; icon: happy"
    ></span>
    <span>Search Emoji</span>
  </a>
  <a data-group="Suggestions">
    <span
      class="uk-margin-small-right"
      uk-icon="ratio: 0.8; icon: git-branch"
    ></span>
    <span>Commits</span>
  </a>
  <a href="#" data-group="Settings">
    <span class="uk-margin-small-right" uk-icon="ratio: 0.8; icon: user"></span>
    <span>Profile</span>
  </a>
  <a href="#" data-group="Settings">
    <span
      class="uk-margin-small-right"
      uk-icon="ratio: 0.8; icon: credit-card"
    ></span>
    <span>Billing</span>
  </a>
  <a href="#" data-group="Settings">
    <span class="uk-margin-small-right" uk-icon="ratio: 0.8; icon: cog"></span>
    <span>Settings</span>
  </a>
</uk-command>

Customizing searchable keywords

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"

<uk-command uk-cloak>
  <a
    data-keywords="input,select,textarea,radio,checkbox,range,toggle switch,range"
    href="#"
  >
    Form
  </a>
  <a data-keywords="text,typography" href="#"> Heading </a>
  <a data-keywords="dialog" href="#"> Modal </a>
</uk-command>

To group related elements, simply use the data-group attribute, and Franken WC will automatically sort the items and add headers.

<uk-command uk-cloak>
  <a href="#" data-group="Suggestions">
    <uk-lucide custom-class="mr-2" icon="calendar"></uk-lucide>
    <span>Calendar</span>
  </a>
  <a href="#" data-group="Suggestions">
    <uk-lucide custom-class="mr-2" icon="smile"></uk-lucide>
    <span>Search Emoji</span>
  </a>
  <a data-group="Suggestions">
    <uk-lucide custom-class="mr-2" icon="calculator"></uk-lucide>
    <span>Calculator</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-lucide custom-class="mr-2" icon="user"></uk-lucide>
    <span>Profile</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-lucide custom-class="mr-2" icon="credit-card"></uk-lucide>
    <span>Billing</span>
  </a>
  <a href="#" data-group="Settings">
    <uk-lucide custom-class="mr-2" icon="settings"></uk-lucide>
    <span>Settings</span>
  </a>
</uk-command>

Disabling an item

Sometimes, we may want to disable items. To do this, simply omit the href attribute, and the item will be automatically disabled.

<uk-command uk-cloak>
  <!-- ... -->
  <a data-group="Suggestions">
    <uk-lucide custom-class="mr-2" icon="calculator"></uk-lucide>
    <span>Calculator</span>
  </a>
  <!-- ... -->
</uk-command>

Attributes

The following attributes are available for this component:

NameTypeDefaultDescription
keySringAssign a keyboard shortcut.
placeholderStringSearchThe placeholder for the input.
toggleStringBehind the scenes, this will be used as the ID of the modal. It is useful for manually toggling the Command component using an <a> or a <button> tag.
Changelog
Support Reach out