Command

Component

cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용.

Related docs

bun add @reopt-ai/opt-ui

100%

Inline Command

CommandDialog (Cmd+K 스타일)

Command

Prop	Type	Default	Description
shouldFilter	boolean	—	자동 필터링 여부 (기본 true)
filter	(value: string, search: string, keywords: string[]) => boolean	—	커스텀 필터 함수 (기본: case-insensitive substring)

CommandInput

Prop	Type	Default	Description
trailing	ReactNode	—	검색 입력 우측에 표시할 보조 콘텐츠
wrapperClassName	string	—	입력 wrapper className

CommandList

Prop	Type	Default	Description
aria-label	string	"Commands"	listbox 접근성 라벨

CommandItem

Prop	Type	Default	Description
value*	string	—	이 항목의 검색 가능 값 (고유 식별자)
keywords	string[]	—	value에 더해 검색어와 비교할 추가 키워드
onSelect	(value: string) => void	—	Enter/클릭 시 호출

View test results

테스트 커버리지

2026년 7월 9일1/1 통과

1성공

0실패

1전체

command dialog에 제목, 설명, 입력, 그룹, shortcut을 연결한다

키보드 동작

키	동작
↑ ↓	활성 항목 이동
Home / End	처음/마지막 항목
Enter	활성 항목 선택
Esc	dialog 닫기

Related components

FieldToken

Facet

Expression

TextTruncate

Highlight

LiveRegion

Command

Component

cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용.

Related docs

bun add @reopt-ai/opt-ui

100%

Inline Command

CommandDialog (Cmd+K 스타일)

Command

Prop	Type	Default	Description
shouldFilter	boolean	—	자동 필터링 여부 (기본 true)
filter	(value: string, search: string, keywords: string[]) => boolean	—	커스텀 필터 함수 (기본: case-insensitive substring)

CommandInput

Prop	Type	Default	Description
trailing	ReactNode	—	검색 입력 우측에 표시할 보조 콘텐츠
wrapperClassName	string	—	입력 wrapper className

CommandList

Prop	Type	Default	Description
aria-label	string	"Commands"	listbox 접근성 라벨

CommandItem

Prop	Type	Default	Description
value*	string	—	이 항목의 검색 가능 값 (고유 식별자)
keywords	string[]	—	value에 더해 검색어와 비교할 추가 키워드
onSelect	(value: string) => void	—	Enter/클릭 시 호출

View test results

테스트 커버리지

2026년 7월 9일1/1 통과

1성공

0실패

1전체

command dialog에 제목, 설명, 입력, 그룹, shortcut을 연결한다

키보드 동작

키	동작
↑ ↓	활성 항목 이동
Home / End	처음/마지막 항목
Enter	활성 항목 선택
Esc	dialog 닫기

Related components

FieldToken

Facet

Expression

생략 위치

endhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

starthttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

middlehttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

startEndhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

테이블 셀

트레이스	경로
trace-9f2c1ad0-77be-4b21-a0d9-4c2f1e88b310-segment-014	https://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

Command

Inline Command

CommandDialog (Cmd+K 스타일)

Command

CommandInput

CommandList

CommandItem

테스트 커버리지

키보드 동작

Related components

FieldToken

Facet

Expression

TextTruncate

Highlight

LiveRegion

Command

Inline Command

CommandDialog (Cmd+K 스타일)

Command

CommandInput

CommandList

CommandItem

테스트 커버리지

키보드 동작

Related components

FieldToken

Facet

Expression

TextTruncate

Highlight

LiveRegion

스키마 컬럼 목록

전체 타입

크기와 채우기

값 분포로 필터하기

표본이 전체보다 작을 때

로딩과 빈 상태

알림 규칙

상태

컬럼 배치

생략 위치

테이블 셀

검색어 강조

검색어 여러 개

스트리밍 카운터