# Command palette · MIAN

Search-and-run: filterable, grouped, keyboard-driven. Inline or in a dialog opened with ⌘K.

- Id: `command` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/command
- Use for: command palette, search dialog, cmd k, quick actions, spotlight search.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-command`: Container.
- `mn-command-input · mn-command-list · mn-command-group · mn-command-heading · mn-command-item · mn-command-empty · mn-command-footer`: Parts.
- `dialog.mn-modal.mn-command-dialog[data-mn-hotkey="k"]`: Opens on ⌘K / Ctrl+K.
- `data-keywords`: Extra search terms for an item.

## Accessibility

- The input is a combobox controlling a listbox; aria-activedescendant follows the highlight so focus stays in the input. Emits cancelable mn:select.

## Examples

### Inline

```html
<div class="mn-command mn-command-bordered" style="max-width:30rem">
  <div class="mn-command-input"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input placeholder="Type a command or search…" aria-label="Command"></div>
  <div class="mn-command-list">
    <div class="mn-command-group" role="group" aria-label="Suggestions"><div class="mn-command-heading">Suggestions</div>
      <div class="mn-command-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg> Calendar</div>
      <div class="mn-command-item" data-keywords="emoji smile"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z"/></svg> Search emoji</div>
      <div class="mn-command-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7Z"/></svg> Launch</div>
    </div>
    <div class="mn-command-group" role="group" aria-label="Settings"><div class="mn-command-heading">Settings</div>
      <div class="mn-command-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg> Profile <small>⌘P</small></div>
      <div class="mn-command-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18M7 15h3"/></svg> Billing <small>⌘B</small></div>
      <div class="mn-command-item"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --> Settings <small>⌘S</small></div>
    </div>
    <div class="mn-command-empty" hidden>No results found.</div>
  </div>
  <div class="mn-command-footer"><span><kbd class="mn-kbd">↑</kbd><kbd class="mn-kbd">↓</kbd>navigate</span><span><kbd class="mn-kbd">↵</kbd>select</span></div>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/command/source