Search field

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

Design

Web

iOS

Android

Anatomy

Solid

Outlined

Large, Medium 2가지 사이즈를 제공합니다. Text field와 같은 사이즈 체계를 사용하며, 상황에 맞춰 자유롭게 사용할 수 있습니다.

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

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

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

Menu의 선택 항목이 40개 이상일 때는 Menu 상단에 Search field를 배치하여 원하는 항목을 빠르게 찾을 수 있도록 합니다. 이때 Search field는 Menu 너비에 맞춰 배경 없이 사용하고, 목록과는 구분선으로 나눕니다.

Don’t

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