Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Command

    A palette that searches and runs grouped commands with shortcuts; in place or in a dialog opened with ⌘K.

    Storybook
    Storybook
    Source
    Source

    Role and semantics

    Section titled “Role and semantics”

    Command is drawn with the inline list of Base UI Combobox: the search input is role="combobox", the list role="listbox", each group a role="group" tied to its heading and commands role="option". The highlighted command is announced through aria-activedescendant; focus stays in the input. Shortcut keys are kbd elements and are read with the command name. CommandDialog uses Base UI Dialog with role="dialog" and aria-modal; its name is “Command palette”. The key hint row carries aria-hidden; the same information comes from the roles.

    Keyboard

    Section titled “Keyboard”
    Key Behaviour
    ⌘K or Ctrl+K Opens and closes CommandDialog (hotkey).
    Typing Filters commands; the first match is highlighted.
    Down and up arrow Moves between commands.
    Enter Runs the highlighted command.
    Escape Closes CommandDialog.

    Focus

    Section titled “Focus”

    When CommandDialog opens, focus moves to the search input and stays inside the dialog. When it closes, focus returns to what opened it. The page outside the dialog cannot be used meanwhile.

    Screen reader output

    Section titled “Screen reader output”
    Example Read as
    Dialog opens “Command palette, dialog, Command palette, combo box”
    Command highlighted “Save ⌘ S, Actions, 1 of 3”
    Disabled command “Sign out, dimmed”
    No results “No results”

    Contrast

    Section titled “Contrast”

    Command labels and group headings keep at least 4.5:1 on the background. The highlight is also reported through aria-activedescendant, not by colour alone. The dimmed backdrop separates the dialog from the page.

    WCAG 2.2

    Section titled “WCAG 2.2”
    Criterion How Command meets it What the product team must do
    1.3.1 Info and relationships Groups are group elements tied to their headings. Give meaningful group headings.
    2.1.1 Keyboard Hotkey, arrow keys, Enter and Escape. Check the hotkey does not clash with another one in the app.
    2.1.4 Character key shortcuts The hotkey needs a modifier (⌘ or Ctrl). Do not add single-letter shortcuts.
    2.4.3 Focus order Focus stays in the dialog and returns to the opener. Also place a visible button that opens the palette.
    4.1.2 Name, role, value Input, list, group and command roles. Keep command labels unique.