Search field

사용자가 키워드나 문장을 입력하여 데이터, 콘텐츠, 또는 기능을 검색할 수 있도록 도와주는 요소를 제공합니다. 자동완성, 추천 검색어, 최근 검색어 등의 기능을 함께 제공할 수 있습니다.

Anatomy

  1. 1. Search icon
  2. 2. Placeholder
  3. 3. Value
  4. 4. Field
  5. 5. Clear button

States

Desktop

Mobile

Size

Search input은 Button과 동일한 높이 체계를 가지고 있으며 Small, Medium 사이즈를 제공합니다. 상황에 맞춰 자유롭게 사용할 수 있습니다.

With top navigation

Top navigation과 함께 사용할 시 제공되는 Size와는 별개로 고정된 높이만 사용할 수 있습니다. Navigation과 함께 사용할 때에는 ‘취소' 버튼을 함께 제공하여 Focused 상태에서 벗어날 수 있도록 설계하는 것을 권장합니다.

Usage

History

Chip을 활용하여 이전 검색 내역을 나타낼 수 있습니다. 단, 콘텐츠의 경중에 따라 가로 배열, 그리드 배열을 선택하여 설계할 수 있습니다.

Suggestions

인기 검색어, 추천 검색어를 배치하여 검색에 대한 유도 장치를 제공할 수 있습니다. 검색어를 클릭할 시 필드에 값이 입력되며 결과 페이지로 이동됩니다.

How to use

Do

Menu의 선택 항목이 40개 이상을 넘어갈 시 사용성을 위해 검색 필드를 배치합니다.

Don’t

700px 이상의 너무 긴 Search field 사용은 지양합니다.

Customize

List cell
typography
interactionExtraPadding
verticalAlign

© 2026 Wanted Lab, Inc.