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 / ALTITUDE
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 PARITYALTITUDE DESIGN SYSTEM
BOTH CHANGEDAltitude Design SystemFIGMA SET · Command Palette1:1 ON EVERY PROPERTYFROM TRACKED PROJECTION
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
SOURCE HASH
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-22
PUBLIC SURFACE
8 ATTR · 1 SLOT · 3 EVENT · 0 PART
A sha1 of every .ts/.scss byte in the component directory, compared against the hash stored at the last sync. It cannot say what changed, and a comment edit moves it. Re-stamping this component records a contract digest instead.
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