← →

Command

A native web component (zero dependencies) that renders a cmdk-style command palette: a search field at the top and a scrollable list of items below. Typing filters the items by substring, and the arrow keys, Enter, and Esc handle keyboard navigation. Use it for quick-action menus, command search, or, placed inside a pura-dialog, as a modal command menu.

Preview

<pura-command id="cmd" placeholder="Type a command or search…" empty="No results found." style="max-width: 420px">
  <pura-command-item value="novo-arquivo">
    New file
    <span slot="shortcut">Ctrl N</span>
  </pura-command-item>
  <pura-command-item value="abrir">
    Open…
    <span slot="shortcut">Ctrl O</span>
  </pura-command-item>
  <pura-command-item value="salvar">
    Save
    <span slot="shortcut">Ctrl S</span>
  </pura-command-item>
  <pura-command-item value="configuracoes">
    Settings
    <span slot="shortcut">Ctrl ,</span>
  </pura-command-item>
  <pura-command-item value="sair" disabled>
    Quit
  </pura-command-item>
</pura-command>

<script type="module">
  document.getElementById("cmd").addEventListener("command", (e) => {
    console.log("command:", e.detail.value, e.detail.label);
  });
</script>

Attributes

Attribute	Type	Default	Description
`placeholder`	string	Type a command or search…	Text shown in the search field when it's empty.
`empty`	string	No results found.	Empty-state text shown when no item matches the search.
`value`	string	""	Current search query (reflects the text typed in the input).
`value (item)`	string	""	On pura-command-item: value sent in the event detail and used for matching (falls back to the label text if absent).
`disabled (item)`	boolean	false	On pura-command-item: disables the item, preventing selection and matching.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/command.js"></script>

JavaScript

import "./pura/lib/command.js";

Slots

defaultshortcut

Events

commandselect