Command

한눈에#

⌘K로 여는 명령 팔레트 — 검색으로 명령을 좁히고 ↑/↓·Enter로 골라 실행합니다. 여러 액션을 모으는 단축 진입점입니다.

선택 결과를 보여주기 위해 데모 래퍼가 onSelect를 받습니다 — Command 자체의 검색·탐색은 핸들러 없이도 동작합니다(비제어).

사용 시점#

검색으로 좁혀 명령을 실행하는 팔레트면 Command — 단순 검색 이동이나 고정 액션 메뉴는 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Command } from '@wds/ui-web';

<Command
  items={[
    { value: 'new', label: '새 파일 만들기' },
    { value: 'open', label: '프로젝트 열기' },
    { value: 'search', label: '문서 검색' },
    { value: 'theme', label: '테마 전환' },
  ]}
/>

변형#

변형이 없습니다 — 항목 단위 disabled로 "보이지만 선택 불가" 상태를 표현합니다(키보드 탐색이 건너뛰고, 클릭·Enter가 무시됩니다). 모달 팔레트가 필요하면 Modal과 합성하세요.

크기#

단일 크기입니다 — 입력 높이 3rem, 리스트 최대 높이 20rem(초과 시 스크롤).

상태#

• 활성 항목 — aria-activedescendant 대상, color.surface-hover 배경
• 빈 결과 — 일치 항목이 없으면 리스트 대신 emptyText를 role="status"로 표시(검색어를 바꾸면 복귀)
• Focus — 루트 :focus-within에 input.border-focus 보더 + 18% 링
• Disabled 항목 — color.disabled-fg 잉크 + 커서 차단

Props#

접근성#

입력이 role="combobox" + aria-autocomplete="list", 리스트가 role="listbox"입니다. 포커스는 입력에 머물고 aria-activedescendant가 활성 항목 id를 가리킵니다(클릭도 mousedown을 막아 입력 포커스 유지).

• 활성 항목은 aria-selected, 비활성 항목은 aria-disabled로 보고
• 빈 결과는 role="status" 라이브 영역 — 필터 결과 소멸을 보조기술에 알림
• 검색 대상은 label 텍스트 — 약어 별칭 검색은 지원하지 않습니다

토큰#

component 토큰 없이 Input의 component 토큰(input.border-focus)과 semantic을 직접 소비합니다(신설 기준 §4 미충족).