# Flux 2.0 — Command palette A searchable list of actions, pages and records, opened over the page with ⌘K. Reference: https://flux.kaptio.com/components/command-palette/ Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css ## Use it when Gets people to any action, page or record by typing a few letters. It is a native dialog holding a combobox and a listbox of grouped options. Focus stays in the input; the arrow keys move the active option and Enter chooses it. An option with data-href navigates; any other dispatches flux-command with its value and closes the palette. It resets when it closes. ## Do not use it when Not as the only way to reach something; every command must also live in the interface. Not for searching within one list; use Search on the list. Not for choosing a form value; use Select. ## Markup ### Palette
Actions
New booking
New quote
Assign a guide to a departure
Go to
Bookings
Departures
Suppliers
Reports
Records
Anna LindqvistKB-104931
Nordic TrailsKB-104877
Golden Circle, 14 SepDEP-0914

 ## API - dialog (element): Open with showModal() or a commandfor button. - flux-command (class): On the dialog. data-flux-command adds filtering, the active option and choosing. Name it with aria-label. - data-flux-command-shortcut (attribute): Opens the palette on ⌘K or Ctrl K, and on the app shell’s flux-shell-search event. Put it on one palette per page. - flux-command__search | __input (class): The input row. The input has role="combobox", aria-controls naming the list and aria-expanded="true". - flux-command__list (class): The role="listbox" element. - flux-command__group | __group-label (class): A role="group" labelled by its label. - flux-command__option | __meta (class): A role="option" with a unique id. data-keywords adds search terms; data-href navigates; data-value is sent with flux-command. - flux-command__empty | __status | __footer (class): The no-results line, the visually hidden result count and the key hints. - flux-command event (attribute): Event dispatched on the dialog when an option without data-href is chosen. detail holds option and value. ## Accessibility - Focus never leaves the input. aria-activedescendant points at the active option, so typing and moving work together. - The result count is announced through a status region as the list filters. - showModal() makes the page inert; a click on the backdrop closes the palette. - If the product already uses ⌘K, as this documentation site does, leave data-flux-command-shortcut off and open the palette from that handler. ## Keyboard - ⌘K / Ctrl K: Opens the palette, with data-flux-command-shortcut. - Arrow Down / Arrow Up: Moves the active option, wrapping at the ends. - Enter: Chooses the active option. - Escape: Closes the palette and returns focus to where it was. ## Tokens - --flux-command-width | -list-height | -offset | -padding | -input-height - --flux-command-bg | -shadow | -backdrop | -divider - --flux-command-option-padding-x | -option-padding-y | -option-active | -option-icon | -group-label ## Do - Name options with the verb first for actions, and the record name for records. - Match on references and synonyms through data-keywords. ## Do not - Do not put destructive actions in the palette without a confirmation. - Do not show more than three groups before the user types; lead with the most used.