Navigation

Command

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

A command menu with a search field that filters the list as you type.

Usage#

app.component.ts

import { WDS_COMMAND } from '@wds/angular/command';

Examples#

Default#

Groups, icons, shortcuts and a disabled command. Selecting a command (click or Enter) fires wds-select with its value and label. Set label, placeholder and empty-text: their defaults are in Polish.

Calendar

Search Emoji

Calculator

Profile

Billing

Settings

Show code

command-default.ts

import { Component } from '@angular/core';
import { WdsCommandComponent, WdsCommandGroupComponent, WdsCommandItemComponent, WdsCommandSeparatorComponent } from '@wds/angular/command';

@Component({
  selector: 'app-command-default-demo',
  imports: [WdsCommandComponent, WdsCommandGroupComponent, WdsCommandItemComponent, WdsCommandSeparatorComponent],
  template: `
    <wds-command class="w-full max-w-sm" label="Search commands" placeholder="Type a command or search…" empty-text="No results found.">
      <wds-command-group label="Suggestions">
        <wds-command-item value="calendar">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4" /><path d="M16 2v4" /><path d="M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" /><path d="M3 10h18" /></svg>
          Calendar
        </wds-command-item>
        <wds-command-item value="emoji">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a10 10 0 1 0 0 20a10 10 0 1 0 0 -20" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><path d="M9 9h.01" /><path d="M15 9h.01" /></svg>
          Search Emoji
        </wds-command-item>
        <wds-command-item value="calculator" disabled>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" /><path d="M8 6h8" /><path d="M16 14v4" /><path d="M16 10h.01" /><path d="M12 10h.01" /><path d="M8 10h.01" /><path d="M12 14h.01" /><path d="M8 14h.01" /><path d="M12 18h.01" /><path d="M8 18h.01" /></svg>
          Calculator
        </wds-command-item>
      </wds-command-group>
      <wds-command-separator></wds-command-separator>
      <wds-command-group label="Settings">
        <wds-command-item value="profile" shortcut="⌘P">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><path d="M12 3a4 4 0 1 0 0 8a4 4 0 1 0 0 -8" /></svg>
          Profile
        </wds-command-item>
        <wds-command-item value="billing" shortcut="⌘B">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" /><path d="M2 10h20" /></svg>
          Billing
        </wds-command-item>
        <wds-command-item value="settings" shortcut="⌘S">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><path d="M12 9a3 3 0 1 0 0 6a3 3 0 1 0 0 -6" /></svg>
          Settings
        </wds-command-item>
      </wds-command-group>
    </wds-command>
  `,
})
export class CommandDefaultDemo {}

Dialog#

The palette in a wds-dialog, opened with a button or ⌘J / Ctrl+J. The dialog has a heading for screen readers, hidden visually. The shortcut is handled by the page.

Open command palette

Or press ⌘J · Selected: none

Show code

command-dialog.ts

import { Component, ElementRef, signal, viewChild } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WDS_COMMAND } from '@wds/angular/command';
import { WdsDialogComponent } from '@wds/angular/dialog';
import { WDS_KBD } from '@wds/angular/kbd';
import type { WdsCommand } from '@wds/core/command';
import type { WdsDialog } from '@wds/core/dialog';

@Component({
  selector: 'app-command-dialog-demo',
  imports: [...WDS_COMMAND, ...WDS_KBD, WdsButtonComponent, WdsDialogComponent],
  host: { '(document:keydown)': 'onKeydown($event)' },
  template: `
    <div class="flex flex-col items-center gap-3">
      <wds-button variant="outline" (click)="open()">Open command palette</wds-button>
      <p class="m-0 text-sm text-muted-foreground">
        Or press
        <wds-kbd-group><wds-kbd>⌘</wds-kbd><wds-kbd>J</wds-kbd></wds-kbd-group>
        · Selected: {{ selected() || 'none' }}
      </p>
    </div>

    <wds-dialog
      #dialog
      heading="Command palette"
      hide-close
      class="[--wds-dialog-width:24rem] [&::part(body)]:p-0 [&::part(header)]:sr-only [&::part(panel)]:border-0 [&::part(panel)]:bg-transparent [&::part(panel)]:shadow-none"
      (wdsAfterClose)="resetSearch()"
    >
      <wds-command
        #command
        label="Search commands"
        placeholder="Type a command or search…"
        empty-text="No results found."
        (wdsSelect)="choose($event.label)"
      >
        <wds-command-group label="Suggestions">
          <wds-command-item value="calendar">Calendar</wds-command-item>
          <wds-command-item value="emoji">Search Emoji</wds-command-item>
          <wds-command-item value="calculator">Calculator</wds-command-item>
        </wds-command-group>
        <wds-command-separator />
        <wds-command-group label="Settings">
          <wds-command-item value="profile" shortcut="⌘P">Profile</wds-command-item>
          <wds-command-item value="billing" shortcut="⌘B">Billing</wds-command-item>
          <wds-command-item value="settings" shortcut="⌘S">Settings</wds-command-item>
        </wds-command-group>
      </wds-command>
    </wds-dialog>
  `,
})
export class CommandDialogDemo {
  protected readonly selected = signal('');
  private readonly dialog = viewChild.required('dialog', { read: ElementRef<WdsDialog> });
  private readonly command = viewChild.required('command', { read: ElementRef<WdsCommand> });

  protected onKeydown(e: KeyboardEvent): void {
    if (e.key.toLowerCase() !== 'j' || !(e.metaKey || e.ctrlKey)) return;
    e.preventDefault();
    this.open();
  }

  protected open(): void {
    this.dialog().nativeElement.show();
    this.command().nativeElement.focus();
  }

  protected choose(label: string): void {
    this.selected.set(label);
    this.dialog().nativeElement.close();
  }

  /** Start with an empty search next time. */
  protected resetSearch(): void {
    this.command().nativeElement.query = '';
  }
}

Scrollable#

A long list scrolls inside the palette; --wds-command-list-height sets its maximum height (default 288px).

Home

Inbox

Documents

Folders

New File

New Folder

Copy

Cut

Paste

Delete

Grid View

List View

Zoom In

Zoom Out

Profile

Billing

Settings

Notifications

Help & Support

Calculator

Calendar

Image Editor

Code Editor

Show code

command-scrollable.ts

import { Component } from '@angular/core';
import { WdsCommandComponent, WdsCommandGroupComponent, WdsCommandItemComponent, WdsCommandSeparatorComponent } from '@wds/angular/command';

@Component({
  selector: 'app-command-scrollable-demo',
  imports: [WdsCommandComponent, WdsCommandGroupComponent, WdsCommandItemComponent, WdsCommandSeparatorComponent],
  template: `
    <wds-command class="w-full max-w-sm" label="Search commands" placeholder="Type a command or search…" empty-text="No results found.">
      <wds-command-group label="Navigation">
        <wds-command-item value="home" shortcut="⌘H">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg>
          Home
        </wds-command-item>
        <wds-command-item value="inbox" shortcut="⌘I">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" /></svg>
          Inbox
        </wds-command-item>
        <wds-command-item value="documents" shortcut="⌘D">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" /></svg>
          Documents
        </wds-command-item>
        <wds-command-item value="folders" shortcut="⌘F">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /></svg>
          Folders
        </wds-command-item>
      </wds-command-group>
      <wds-command-separator></wds-command-separator>
      <wds-command-group label="Actions">
        <wds-command-item value="new-file" shortcut="⌘N">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
          New File
        </wds-command-item>
        <wds-command-item value="new-folder" shortcut="⇧⌘N">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 10v6" /><path d="M9 13h6" /><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /></svg>
          New Folder
        </wds-command-item>
        <wds-command-item value="copy" shortcut="⌘C">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
          Copy
        </wds-command-item>
        <wds-command-item value="cut" shortcut="⌘X">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3a3 3 0 1 0 0 6a3 3 0 1 0 0 -6" /><path d="M6 15a3 3 0 1 0 0 6a3 3 0 1 0 0 -6" /><path d="M20 4 8.12 15.88" /><path d="M14.47 14.48 20 20" /><path d="M8.12 8.12 12 12" /></svg>
          Cut
        </wds-command-item>
        <wds-command-item value="paste" shortcut="⌘V">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 14h10" /><path d="M16 4h2a2 2 0 0 1 2 2v1.344" /><path d="m17 18 4-4-4-4" /><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113" /><path d="M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z" /></svg>
          Paste
        </wds-command-item>
        <wds-command-item value="delete" shortcut="⌫" variant="destructive">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><path d="M10 11v6" /><path d="M14 11v6" /></svg>
          Delete
        </wds-command-item>
      </wds-command-group>
      <wds-command-separator></wds-command-separator>
      <wds-command-group label="View">
        <wds-command-item value="grid">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" /><path d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" /><path d="M15 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z" /><path d="M4 14h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1z" /></svg>
          Grid View
        </wds-command-item>
        <wds-command-item value="list">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12h.01" /><path d="M3 18h.01" /><path d="M3 6h.01" /><path d="M8 12h13" /><path d="M8 18h13" /><path d="M8 6h13" /></svg>
          List View
        </wds-command-item>
        <wds-command-item value="zoom-in" shortcut="⌘+">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 3a8 8 0 1 0 0 16a8 8 0 1 0 0 -16" /><path d="m21 21-4.35-4.35" /><path d="M11 8v6" /><path d="M8 11h6" /></svg>
          Zoom In
        </wds-command-item>
        <wds-command-item value="zoom-out" shortcut="⌘-">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 3a8 8 0 1 0 0 16a8 8 0 1 0 0 -16" /><path d="m21 21-4.35-4.35" /><path d="M8 11h6" /></svg>
          Zoom Out
        </wds-command-item>
      </wds-command-group>
      <wds-command-separator></wds-command-separator>
      <wds-command-group label="Account">
        <wds-command-item value="profile" shortcut="⌘P">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><path d="M12 3a4 4 0 1 0 0 8a4 4 0 1 0 0 -8" /></svg>
          Profile
        </wds-command-item>
        <wds-command-item value="billing" shortcut="⌘B">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" /><path d="M2 10h20" /></svg>
          Billing
        </wds-command-item>
        <wds-command-item value="settings" shortcut="⌘S">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><path d="M12 9a3 3 0 1 0 0 6a3 3 0 1 0 0 -6" /></svg>
          Settings
        </wds-command-item>
        <wds-command-item value="notifications">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0" /><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></svg>
          Notifications
        </wds-command-item>
        <wds-command-item value="help">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a10 10 0 1 0 0 20a10 10 0 1 0 0 -20" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>
          Help & Support
        </wds-command-item>
      </wds-command-group>
      <wds-command-separator></wds-command-separator>
      <wds-command-group label="Tools">
        <wds-command-item value="calculator">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" /><path d="M8 6h8" /><path d="M16 14v4" /><path d="M16 10h.01" /><path d="M12 10h.01" /><path d="M8 10h.01" /><path d="M12 14h.01" /><path d="M8 14h.01" /><path d="M12 18h.01" /><path d="M8 18h.01" /></svg>
          Calculator
        </wds-command-item>
        <wds-command-item value="calendar">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4" /><path d="M16 2v4" /><path d="M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" /><path d="M3 10h18" /></svg>
          Calendar
        </wds-command-item>
        <wds-command-item value="image">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" /><path d="M9 7a2 2 0 1 0 0 4a2 2 0 1 0 0 -4" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" /></svg>
          Image Editor
        </wds-command-item>
        <wds-command-item value="code">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 18 6-6-6-6" /><path d="m8 6-6 6 6 6" /></svg>
          Code Editor
        </wds-command-item>
      </wds-command-group>
    </wds-command>
  `,
})
export class CommandScrollableDemo {}

Keywords#

The search ignores case and diacritics, so “lodz” finds “Łódź”. keywords adds words that match without being shown. The empty slot replaces the message shown when nothing matches.

Settings

Billing

Log out

Łódź

Zürich

São Paulo

Nothing found. Try another word.

Show code

command-keywords.ts

import { Component } from '@angular/core';
import { WdsCommandComponent, WdsCommandGroupComponent, WdsCommandItemComponent } from '@wds/angular/command';

@Component({
  selector: 'app-command-keywords-demo',
  imports: [WdsCommandComponent, WdsCommandGroupComponent, WdsCommandItemComponent],
  template: `
    <wds-command class="w-full max-w-sm" label="Search commands" placeholder="Try “preferences” or “sign out”…">
      <wds-command-group label="Account">
        <wds-command-item value="settings" keywords="preferences options">Settings</wds-command-item>
        <wds-command-item value="billing" keywords="payment invoice card">Billing</wds-command-item>
        <wds-command-item value="logout" keywords="sign out exit">Log out</wds-command-item>
      </wds-command-group>
      <wds-command-group label="Places">
        <wds-command-item value="lodz">Łódź</wds-command-item>
        <wds-command-item value="zurich">Zürich</wds-command-item>
        <wds-command-item value="sao-paulo">São Paulo</wds-command-item>
      </wds-command-group>
      <div slot="empty">Nothing found. Try another word.</div>
    </wds-command>
  `,
})
export class CommandKeywordsDemo {}

API References#

wds-command#

Command palette: a search field and a filtered list of commands. Focus stays in the search field; the arrow keys move the highlight (skipping disabled commands), Enter selects, Escape goes back to the first command. aria-activedescendant points to the highlighted command, and an aria-live region announces the number of results.

Attributes

Attribute	Type	Default	Description
placeholder	string	'Wpisz polecenie lub szukaj…'	Placeholder of the search field.
empty-text.emptyText	string	'Brak wyników.'	Message shown when nothing matches. The `empty` slot takes precedence.
label	string	'Szukaj poleceń'	Accessible name of the search field and the list.
query	string	''	Search text. Setting it filters the list without firing `wds-search`.

Events

Event	Description
wds-selectCustomEvent<WdsCommandSelectDetail>	A command is selected (click or Enter).
wds-searchCustomEvent<WdsCommandSearchDetail>	The search text changes.

Slots

Slot	Description
(default)	`wds-command-group`, `wds-command-item`, `wds-command-separator`.
empty	Content shown when nothing matches (instead of `empty-text`).

CSS parts (::part)

Part	Description
base	The panel with the padding and the border.
search	The search field (with the icon).
input	The native `<input>`.
list	The list of commands.
empty	The "no results" message.

CSS custom properties

Property	Description
--wds-command-border-color	Border color of the panel (default `--wds-border`).
--wds-command-list-height	Maximum height of the list (default 288px).

wds-command-group#

A group of commands with a heading (role="group"). It hides when none of its commands match the search.

Attributes

Attribute	Type	Default	Description
label	string	''	Group heading (also the accessible name of the group).

Slots

Slot	Description
(default)	`wds-command-item`.

CSS parts (::part)

Part	Description
label	The group heading.

wds-command-item#

A command in the wds-command list (role="option"). The highlighted one has data-active.

Attributes

Attribute	Type	Default	Description
value	string	''	Value passed in `wds-select`.
label	string \| undefined		Name used for search and in `wds-select`. Defaults to the text content.
keywords	string	''	Extra words matched by the search (e.g. synonyms, abbreviations).
shortcut	string	''	Keyboard shortcut shown on the right, e.g. `⌘P`. It is only displayed; handle the keys yourself.
variant	WdsCommandItemVariant	'default'	`destructive`: the error color (e.g. "Delete").
disabled	boolean	false	Disables the command: it cannot be highlighted or selected.

Slots

Slot	Description
(default)	An `<svg>` icon (16px) and the name of the command.

CSS parts (::part)

Part	Description
base	The row with the padding.
shortcut	The keyboard shortcut.

wds-command-separator#

A decorative line between groups of commands, hidden from screen readers. Hidden while searching.

CSS parts (::part)

Part	Description
base	The line.

Accessibility#

The search field has role="combobox" with aria-controls pointing to the list (role="listbox"). Both are named by label; its default is in Polish (Szukaj poleceń), so set it.

Focus stays in the search field. aria-activedescendant points to the highlighted command (role="option", aria-selected="true"); disabled commands have aria-disabled="true".

Groups have role="group" named by their label. Separators are decorative: hidden from screen readers, and hidden while searching. Shortcuts are hidden from screen readers too; give icons aria-hidden="true".

A live region announces the number of results after each change of the search, and a hidden hint on the search field describes the keys. Both texts are built in and currently in Polish.

In a wds-dialog, give the dialog a heading (it can be hidden visually) so the dialog has a name.

Keyboard support#

Key	Function
A–Z	Typing filters the list; the first matching command is highlighted.
ArrowDownArrowUp	Moves the highlight to the next or previous command, wrapping around; disabled commands are skipped.
Enter	Selects the highlighted command.
Escape	Moves the highlight back to the first command. In a dialog, it also closes the dialog.
Tab	Leaves the palette: the commands are not in the tab sequence.

Usage#

Examples#

Default#

Dialog#

Scrollable#

Keywords#

API References#

wds-command#

Attributes

Events

Slots

CSS parts (::part)

CSS custom properties

wds-command-group#

Attributes

Slots

CSS parts (::part)

wds-command-item#

Attributes

Slots

CSS parts (::part)

wds-command-separator#

CSS parts (::part)

Accessibility#

Screen reader#

Keyboard support#