CommandPalette

<section class="cpal-root" aria-label="Command palette">
  <label for="cpalInput" class="cpal-label">Run command</label>
  <input id="cpalInput" class="cpal-input" type="text" value="open billing settings" aria-describedby="cpalHint" />
  <p id="cpalHint" class="cpal-hint">Type to filter commands, then press Enter.</p>
  <ul class="cpal-list" role="listbox" aria-label="Suggested commands">
    <li class="cpal-item cpal-item--active" role="option" aria-selected="true"><span>Open billing settings</span><kbd>Enter</kbd></li>
    <li class="cpal-item" role="option" aria-selected="false"><span>Create invoice draft</span><kbd>⌘K</kbd></li>
    <li class="cpal-item" role="option" aria-selected="false"><span>Invite teammate</span><kbd>⌘I</kbd></li>
  </ul>
</section>