Select

Select (셀렉트)

Select는 최소 네 개 이상의 옵션 목록에서 사람들이 단 하나의 옵션을 선택하게 해 주는 요소예요. Select는 나열된 옵션에 브라우저 기본 스타일을 사용하죠. 폼에서 데이터를 제출하고 모바일 플랫폼에서 사용하기 쉽다는 점이 이상적이에요.

목록의 스타일을 제어하거나 옵션 형식을 지정해야 한다면 dropdown을, 보이는 필드에 직접 입력해 자유 형식 답변을 제출하거나 옵션 목록을 필터링해야 한다면 combobox를 시도해 보세요. 도움말 텍스트와 검증 스타일을 포함한 표준화된 폼 컴포넌트가 필요하다면 select field 컴포넌트를 사용하세요.

출처: React Select 문서

본문

Behavior (동작)

Default selection (기본 선택)

첫 번째 렌더링에서 select는 메뉴의 첫 번째 옵션을 기본 선택으로 보여줘요. select 요소에 defaultValue prop을 정의하거나 적절한 option 요소에 selected prop을 사용해서 기본 선택을 바꿀 수 있어요.

Default selection behavior

기본 선택 동작

Content (콘텐츠)

사람들이 메뉴에서 무엇을 찾을 수 있는지 알려주는 설명적인 라벨을 사용하세요. 짧은 단어나 짧은 구절이 가장 좋아요.

select 옵션은 병렬 구조(parallel construction)로 작성하세요. 예를 들어 모두 명사이거나 모두 동사이도록요. 단, 각 옵션의 시작 부분에 같은 단어나 구절을 반복하지 마세요. "none"이 옵션이라면 포함하세요.

문장형 대문자 표기—첫 단어만 대문자로—를 사용하세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization을 참고하세요.

Select content

더 알아보기 (Learn more)