Components

Search

검색 입력 — 돋보기와 단축키 힌트를 포함합니다.

⌕⌘K
코드 보기
<div class="tn-search">
  <span class="ic">⌕</span>
  <input placeholder="검색">
  <kbd>⌘K</kbd>
</div>

Variants

이름설명미리보기
기본돋보기 + ⌘K 힌트⌕⌘K
결과 없음Empty State(검색형)와 연결결과 없음 → Empty State

Guidelines

✓ Do
  • ⌘K(맥)/Ctrl+K(윈도우) 단축키 지원
  • 입력 즉시 필터 (버튼 없음)
✕ Don't
  • 검색 버튼을 옆에 붙이지 않는다
  • placeholder에 긴 설명 금지 ("검색" 한 단어)

Specification

속성토큰/값비고
radius8px
kbd0.62rem / muted 배경