검색 필드
목록이 길어 찾아야 할 때. 20개 이하면 필터로 충분합니다.
코드
<div class="jt-search">
<span class="jt-ico-mask jt-ico-sm" style="--jt-ico-url:url(/brand/icons/search.svg)" aria-hidden="true"></span>
<input class="jt-search-input" type="search" placeholder="품목명 / 코드 검색" aria-label="품목 검색">
<button class="jt-search-clear" aria-label="검색어 지우기"><span class="jt-ico-mask jt-ico-sm" style="--jt-ico-url:url(/brand/icons/close.svg)" aria-hidden="true"></span></button>
</div>하지 말 것
- 검색 결과가 없을 때 빈 화면만 두지 마세요 — 빈 상태로 다음 행동을 안내합니다.
접근성
- 입력칸에
aria-label또는 연결된<label> - 지우기 버튼에
aria-label="검색어 지우기" - 돋보기 아이콘은 장식이므로
aria-hidden="true"
앱에서 모양 바꾸기
이 컴포넌트는 별도 노브가 없습니다. 크기·색이 다르게 필요하면 도움말로 요청하세요 — 토큰에 먼저 추가한 뒤 씁니다.