본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

셀렉트

셀렉트는 사용자에게 여러 개의 옵션 목록을 팝업으로 제공하여 그 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다.

컴포넌트명

셀렉트 (Select)

셀렉트(Select) 스타일 예시

  1. 1.레이블

    옵션 목록의 카테고리에 대한 설명 또는 옵션 선택에 대한 도움말을 제공함

  2. 2.도움말(선택)

    셀렉트에 관한 보조 설명글 또는 얼럿을 필요시에 제공함

  3. 3.컨테이너

    콤보박스와 배경을 구분하는 시각적인 수단으로 면 또는 선으로 표현됨

  4. 4.아이콘

    옵션 목록의 확장/축소 상태를 나타냄

  5. 5.옵션

    사용자가 선택할 수 있는 값 또는 사용자에게 제안된 값의 목록

  6. 6.강조 효과

    셀렉트 레이어가 펼쳐졌을 때 사용자가 선택한 옵션값을 강조하여 보여주거나 마우스/키보드 초점이 탐색 중인 항목을 강조하여 보여줌

유형

Selectbox

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

Large

입력시 필요한 정보를 입력해 주세요

Small

입력시 필요한 정보를 입력해 주세요

코드 보기

State사용자의 상호작용 시 컬러가 변경된다.

Default

입력시 필요한 정보를 입력해 주세요

Focused

입력시 필요한 정보를 입력해 주세요

Completed

입력시 필요한 정보를 입력해 주세요

Error

입력시 필요한 정보를 입력해 주세요

Disabled

입력시 필요한 정보를 입력해 주세요

View

입력시 필요한 정보를 입력해 주세요

Open선택했을때 사용자에게 제안된 값의 목록이 나타난다.

셀렉트 유형 중 선택시 나타나는 값의 목록(Large, Small) 예시

Text보조 설명글 또는 얼럿을 필요시에 제공한다.

Hint

입력시 필요한 정보를 입력해 주세요

Alert

가이드

  • 옵션 텍스트를 간결하게 제공한다. 옵션 텍스트는 컨테이너와 옵션 목록 영역에 표현될 수 있는 적절한 길이로 제공해야 한다. 옵션 텍스트의 길이가 셀렉트의 너비를 벗어나게 되면 사용자는 선택하고자 하는 옵션의 정확한 내용을 파악할 수 없다. 불가피한 경우 해당 옵션에 툴팁을 제공하여 옵션에 마우스 또는 키보드가 접근했을 때 전체 내용이 표시되도록 해야 한다.
  • 모든 셀렉트에는 레이블을 제공한다. 셀렉트에 레이블이 제공되지 않으면 어떤 값을 선택해야 하는 것인지 알 수 없다. 레이블을 생략하고자 하는 경우에는 레이블 없이도 사용자가 값을 선택하는 데 문제가 없다는 근거가 명확해야 한다.
  • 셀렉트에 값을 변경하였을 때 폼이 제출되어서는 안 된다. 입력폼에 별도의 제출 버튼을 제공하여 사용자가 입력폼의 제출을 확정하는 경우에만 데이터가 전송되어야 한다. 사용자는 입력폼에서 입력한 데이터를 수정하거나 다음 항목의 데이터를 입력하게 되는데, 이때 셀렉트의 옵션 변경만으로도 폼이 제출되어 버리면 기존에 입력한 정보가 삭제되거나 의도하지 않게 제출되어 당황하게 된다. 특히 키보드, 스크린 리더 사용자는 데이터를 다시 입력하는 과정에서 이 같은 변화의 맥락을 인지하는 데 어려움이 따르므로 유의해야 한다.