Navigation
Command Palette
semantic HTML검색과 키보드 탐색으로 명령을 빠르게 실행하는 범용 팔레트입니다.
Live example
<section data-standard-component="command-palette"><button type="button" data-command-open>Open commands</button><dialog data-command-dialog><article><header><strong>Commands</strong></header><input type="search" placeholder="Filter commands" data-command-search><div data-command-list><button type="button" data-command>Open record</button><button type="button" data-command>Run review</button><button type="button" data-command>Change theme</button></div></article></dialog><output data-example-output aria-live="polite">Ready</output></section>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.5 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
native dialog, search label, Escape close, visible light-DOM fallback
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->