Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Select

Select

Select

Select는 여러 옵션 중 하나의 값을 선택할 수 있도록 돕는 입력 UI 요소입니다. 옵션 목록은 드롭다운(Dropdown) 또는 모바일 환경에서는 바텀 시트(Bottom Sheet)를 통해 노출됩니다.

Select

Select는 여러 옵션 중 하나의 값을 선택할 수 있도록 돕는 입력 UI 요소입니다. 옵션 목록은 드롭다운(Dropdown) 또는 모바일 환경에서는 바텀 시트(Bottom Sheet)를 통해 노출됩니다.

Select

Select는 여러 옵션 중 하나의 값을 선택할 수 있도록 돕는 입력 UI 요소입니다. 옵션 목록은 드롭다운(Dropdown) 또는 모바일 환경에서는 바텀 시트(Bottom Sheet)를 통해 노출됩니다.

Anatomy

ESSENTIAL

1. 선택 영역

현재 선택된 옵션을 표시하는 영역입니다. 선택 전에는 플레이스홀더(placeholder)를 노출할 수 있으며, 선택 후에는 해당 값으로 대체됩니다.

2. 인디케이터 아이콘

옵션 목록의 확장 여부를 나타내는 아이콘입니다. 열림/닫힘 상태가 시각적으로 구분되어야 하기 때문에 하단 방향 화살표(▼) 아이콘을 사용하며, 사용자가 클릭 가능 영역을 직관적으로 인식하도록 돕습니다.

OPTIONAL

3. 레이블

Select의 목적이나 입력 항목을 설명하는 텍스트입니다. 필요한 경우에만 사용하며, 선택 값과 명확히 구분되어야 합니다.

Anatomy

ESSENTIAL

1. 선택 영역

현재 선택된 옵션을 표시하는 영역입니다. 선택 전에는 플레이스홀더(placeholder)를 노출할 수 있으며, 선택 후에는 해당 값으로 대체됩니다.

2. 인디케이터 아이콘

옵션 목록의 확장 여부를 나타내는 아이콘입니다. 열림/닫힘 상태가 시각적으로 구분되어야 하기 때문에 하단 방향 화살표(▼) 아이콘을 사용하며, 사용자가 클릭 가능 영역을 직관적으로 인식하도록 돕습니다.

OPTIONAL

3. 레이블

Select의 목적이나 입력 항목을 설명하는 텍스트입니다. 필요한 경우에만 사용하며, 선택 값과 명확히 구분되어야 합니다.

Anatomy

ESSENTIAL

1. 선택 영역

현재 선택된 옵션을 표시하는 영역입니다. 선택 전에는 플레이스홀더(placeholder)를 노출할 수 있으며, 선택 후에는 해당 값으로 대체됩니다.

2. 인디케이터 아이콘

옵션 목록의 확장 여부를 나타내는 아이콘입니다. 열림/닫힘 상태가 시각적으로 구분되어야 하기 때문에 하단 방향 화살표(▼) 아이콘을 사용하며, 사용자가 클릭 가능 영역을 직관적으로 인식하도록 돕습니다.

OPTIONAL

3. 레이블

Select의 목적이나 입력 항목을 설명하는 텍스트입니다. 필요한 경우에만 사용하며, 선택 값과 명확히 구분되어야 합니다.

State

State

State

Properties

Filled

false, true

Focused

false, true

Error

false, true

Helper Text

false, true

State

default, disabled, hover

Size

L, S

Properties

Filled

false, true

Focused

false, true

Error

false, true

Helper Text

false, true

State

default, disabled, hover

Size

L, S

Properties

Filled

false, true

Focused

false, true

Error

false, true

Helper Text

false, true

State

default, disabled, hover

Size

L, S

Spec


Behavior

드롭다운 컴포넌트와 함께 사용하고,
레이어 충돌을 방지하기 위해 z-index는 가장 높은 우선순위로 설정합니다.


Responsive Alignment

모바일 환경에서는 드롭다운 대신 바텀 시트 형태로 작동합니다.


Spec

Behavior

드롭다운 컴포넌트와 함께 사용하고, 레이어 충돌을 방지하기 위해 z-index는 가장 높은 우선순위로 설정합니다.


Responsive Alignment

모바일 환경에서는 드롭다운 대신 바텀 시트 형태로 작동합니다.

Spec


Behavior

드롭다운 컴포넌트와 함께 사용하고,
레이어 충돌을 방지하기 위해 z-index는 가장 높은 우선순위로 설정합니다.


Responsive Alignment

모바일 환경에서는 드롭다운 대신 바텀 시트 형태로 작동합니다.


Usage

Do

선택지는 짧고 간결하게 작성해야 합니다.

Don't

선택지가 4개 미만인 경우, Select 대신 Radio Button 사용을 권장합니다.

Usage

Do

선택지는 짧고 간결하게 작성해야 합니다.

Don't

선택지가 4개 미만인 경우, Select 대신 Radio Button 사용을 권장합니다.

Usage

Do

선택지는 짧고 간결하게 작성해야 합니다.

Don't

선택지가 4개 미만인 경우, Select 대신 Radio Button 사용을 권장합니다.

Prev

Radio Button

Prev

Radio Button

Prev

Radio Button

Next

Snackbar

Next

Snackbar

Next

Snackbar

Contact Us

©Codeit

Contact Us

©Codeit

Contact Us

©Codeit