A cmd/ctrl+k overlay with fuzzy search over a provided action list. Reuses `al-focus-trap` for the same focus-containment behavior as `al-dialog`/`al-popover`, and the same "always-rendered, opacity/visibility toggled" overlay shape as `al-dialog` for its backdrop + transition.
PLAYGROUND2 CONTROLS
PREVIEW / al-command-palette / SOUTHLEFT
Loading preview
Open command palette
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYNOT TRACKED
NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEcommand-palette--DefaultPASS
Advanced statesAXE3 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 4 STORIES.
import '@southleft/al-web-components/components/command-palette';
import { ALCommandPalette } from '@southleft/al-react';
API — 8 PROPS8 DOCUMENTED
PROPTYPEDEFAULT
actionsArray<ALCommandAction>Settable as a JSON attribute as well as a property, so the palette can be
driven from static HTML and SSR — not only from JavaScript.[]
isActivebooleanIs the palette open?—
enableShortcutbooleanOpt-in: when true, a document-level Cmd/Ctrl+K listener toggles the palette open.—
placeholderstringInput placeholder text.'Type a command or search…'
emptyTextstringText shown when no action matches the query.'No matching commands'
ariaLabelstringAccessible label for the dialog surface.'Command palette'
searchLabelstringAccessible name for the search input.
NOT the placeholder. A placeholder is not an accessible name — it is
removed from the accessibility tree the moment the user types, so the field
a screen-reader user is mid-way through becomes an unnamed combobox. The
two are set separately for that reason.'Search commands'
transitionDelaynumberNumber of ms of the palette's open/close CSS transition delay, used to delay
focus trap activation. Mirrors al-dialog's `transitionDelay`.200
SLOTS1
SLOTDESCRIPTION
(default)Optional content rendered above the results list (e.g. recent-searches).
EVENTS3
EVENTDESCRIPTIONTYPE
onCommandPaletteOpenFired when the palette opens. Detail: `{ active }` — always `true`.CustomEvent
onCommandPaletteCloseFired when the palette closes by any means (Escape, backdrop click, or an action being chosen). Detail: `{ active }` — always `false`.CustomEvent
onCommandPaletteActionFired when an action is chosen (click or Enter). Detail: `{ action }` — the selected `ALCommandAction`.CustomEvent