Components

Button

Price marker

Search bar

Design Library

About

Brand

Foundations

Components

Expressions

Resources

Articles

Design Library

Search bar

사용자가 숙소, 지역 정보를 기반으로 상품을 빠르게 탐색 수 있도록 검색 기능을 제공하는 컴포넌트입니다. 텍스트 필드에 정보를 입력하면 관련 결과를 확인할 수 있습니다.

Figma UI Kit

DONE

Develop

iOS

DONE

Android

DONE

Search bar

Figma UI Kit

DONE

Develop

iOS

DONE

Android

DONE

Search bar

Figma UI Kit

DONE

Develop

iOS

DONE

Android

DONE

Usage

Spec

Usage

Activate

• Focused 상태에서는 Search Bar가 활성화 상태로 변화하며, 커서와 키보드를 노출합니다. • 입력하는 정보에 맞춰 하단 Suggestion 콘텐츠가 변화합니다.

Activate

• Focused 상태에서는 Search Bar가 활성화 상태로 변화하며, 커서와 키보드를 노출합니다. • 입력하는 정보에 맞춰 하단 Suggestion 콘텐츠가 변화합니다.

Activate

• Focused 상태에서는 Search Bar가 활성화 상태로 변화하며, 커서와 키보드를 노출합니다. • 입력하는 정보에 맞춰 하단 Suggestion 콘텐츠가 변화합니다.

Keyboard

• 입력될 데이터에 맞는 키보드를 제공하여 사용자가 별도의 키보드 변경 없이 입력할 수 있도록 제공합니다. • Focused 상태에서는 커서와 키보드를 노출합니다. • 한글, 영문 데이터에 맞게 키보드를 사용합니다. 입력될 데이터 유형을 알 수 없는 경우에는 한글 키보드를 기본으로 노출합니다.

Keyboard

Text field

사용자의 행동에 따라 검색 필드와 텍스트가 변경되며 이에 따라 콘텐츠와 화면이 변화됩니다.

Text field

사용자의 행동에 따라 검색 필드와 텍스트가 변경되며 이에 따라 콘텐츠와 화면이 변화됩니다.

Text field

사용자의 행동에 따라 검색 필드와 텍스트가 변경되며 이에 따라 콘텐츠와 화면이 변화됩니다.

Placeholder text

사용자가 검색할 수 있는 내용을 간략히 안내하여 입력 범위를 이해하고 빠르게 검색을 시작할 수 있도록 돕습니다.

Placeholder text

사용자가 검색할 수 있는 내용을 간략히 안내하여 입력 범위를 이해하고 빠르게 검색을 시작할 수 있도록 돕습니다.

Placeholder text

사용자가 검색할 수 있는 내용을 간략히 안내하여 입력 범위를 이해하고 빠르게 검색을 시작할 수 있도록 돕습니다.

Input text

• 사용자가 입력을 시작하면 Placeholder Text가 입력한 텍스트로 대체됩니다. • 사용자가 입력하는 마지막 텍스트에 맞춰 Text Cursor가 작동합니다. • 사용자의 입력값에 따라 하단 영역에 해당 정보와 일치하는 텍스트가 Highlight 되어 노출됩니다.

Input text