검색 입력

기사·작품·컬렉션 목록을 좁혀 들어가는 검색창이다. 좌측 아이콘으로 검색 자리임을 알리고, 값이 생기면 우측에 지우기 버튼을 제공한다. Muse에서는 검색도 편집 지면의 일부처럼 낮은 대비의 종이색 표면으로 둔다.

상태

기본

값 있음

비활성

값이 있을 때만 지우기 버튼이 보인다. focus 는 잉크색 border 로 처리한다.

name + defaultValue 만 주면 폼 제출로 검색된다.

Preview

tsx

<form method="get">
  <SearchInput name="q" defaultValue={q ?? ""} placeholder="검색" />
</form>

className 으로 너비를 준다.

Preview

tsx

<SearchInput placeholder="검색" className="w-72" />