Select

Select (선택)

Select(sélection)는 사용자가 값 목록에서 하나의 옵션을 선택할 수 있게 해주는 컴포넌트예요. 옵션 목록에서 사용자가 제공한 정보를 수집하는 데 사용됩니다.

출처: Select

본문

AI 라벨이 있는 select with AI label이 이제 안정(stable) 버전이 됐어요. 이 추가는 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다. 자세한 내용은 AI 존재(AI presence) 섹션을 참고하세요.

개요 (Overview)

select 컴포넌트는 옵션 목록에서 사용자가 제공한 정보를 수집해요. Selects는 보통 사용자가 데이터를 제출하고 목록에서 하나의 옵션을 고르는 폼에서 사용됩니다.

언제 사용할까요 (When to use)

사용자가 옵션 목록에서 선택하고 데이터를 제출하는 폼 안에서 select 컴포넌트를 사용하세요.
경험이 대부분 폼 기반일 때.

언제 사용하지 말아야 할까요 (When not to use)

열거된 선택지가 세 개 미만이라면 select를 사용하지 않는 것이 모범 사례예요. 이 경우 라디오 버튼(radio button) 그룹을 대신 사용하세요.

Select 대 Dropdown (Select versus Dropdown)

select와 드롭다운(dropdown) 컴포넌트는 비슷해 보이지만 기능이 달라요.

select는 사용자가 그 목록에서 하나의 항목만 선택할 수 있는 옵션 목록을 제시해요. 사용자가 select 목록에서 옵션을 고르고 데이터를 제출하는 폼에서 가장 잘 작동합니다.
드롭다운은 사용자가 그 목록에서 하나 또는 여러 옵션을 선택할 수 있는 옵션 목록을 제시해요. 드롭다운 옵션은 액션을 취하거나 기존 콘텐츠를 필터·정렬하는 데 사용됩니다.

두 컴포넌트 사이의 또 다른 중요한 차이는 기본 코드예요. select 목록의 모양은 사용 중인 브라우저에 의해 결정되지만, 드롭다운 목록은 필요에 따라 스타일링할 수 있습니다.

왼쪽에 데이터 제출용 select 옵션 목록, 오른쪽에 액션 기능이 있는 드롭다운 옵션 목록의 예시.

변형 (Variants)

변형 (Variant)	용도 (Purpose)
Default	다양한 다른 컴포넌트와 함께 폼에서 주로 사용.
Inline select	폼 안에 여러 select 필드가 있을 때 사용.

기본 select (Default select)

기본 select는 다른 컴포넌트와 함께 폼에서 사용돼요.

인라인 select (Inline select)

폼 안에 여러 select 필드가 있을 때 인라인 select가 유용해요. 인라인 select는 테두리가 없어 페이지에서 시각적 무게가 덜합니다.

포맷 (Formatting)

구조 (Anatomy)

Default
Fluid
라벨(Labels): 드롭다운 옵션 목록에서 무엇을 기대하는지 알려주는 텍스트.
기본 옵션(Default option): 기본으로 선택된 빈 옵션. 사용자는 목록에서 다른 옵션을 고를지 결정할 수 있어요. 사용 사례에 따라 이 기본 동작은 목록의 첫 번째 옵션(보통 알파벳 순서)으로 미리 채워진 선택이거나, 목록에 있는 자주 사용되거나 흔한 옵션으로 미리 채워진 선택으로 수정될 수 있습니다.
헬퍼 텍스트(Helper text, 오류·경고 제외 선택): 사용자가 올바른 선택을 하도록 돕는 보조 텍스트. 플루이드 스타일에서는 헬퍼 텍스트가 툴팁으로 표시됩니다.
필드(Field): 드롭다운이 열리거나 닫힐 때 유지되는 부분.
옵션(Option): 목록에서 다른 선택지와 함께 표시되는 사용자를 위한 선택.
목록(List): 열린 상태로 표시되는 선택할 옵션 목록.
상태 아이콘(Status icon): select의 상태(오류 또는 경고)를 나타냅니다.
오류 또는 경고 텍스트(Error or Warning text): 오류나 경고 상태가 나타나면 헬퍼 텍스트를 대체합니다.

스타일링 (Styling)

select 입력에는 기본(default)과 플루이드(fluid)의 두 가지 스타일이 있어요. 기능은 같지만 시각적으로 다르며, 어디에 사용할지에 영향을 줍니다.

스타일 (Style)	모양 (Appearance)	사용 사례 (Use case)
Default	라벨이 입력 필드 바깥과 위에 배치되는 전통적인 스타일.	입력 컴포넌트 사이에 여백이 필요하거나 공간이 빠듯하고 더 작은 컴포넌트가 필요한 생산적 순간에 사용.
Fluid	라벨이 입력 필드 안에 배치되고 사용자 입력 텍스트와 인라인으로 겹쳐지는 대체 스타일.	표현적 순간, 플루이드 폼, 제한된 공간, 또는 툴바 같은 복잡한 컴포넌트에 붙일 때 사용.

크기 (Sizing)

기본 입력 높이 (Default input heights)

두 변형 모두 기본 select 높이 크기는 small, medium, large의 세 가지가 있어요. 세 가지 select 크기를 지원하면 레이아웃을 구성할 때 더 많은 유연성을 얻을 수 있어요. 그러나 같은 페이지의 모든 폼 컴포넌트에는 일관된 크기를 사용하세요. 예를 들어 중간 크기 select를 사용한다면 같은 크기의 텍스트 입력, 버튼 등도 사용하세요. 확신이 없으면 기본 중간 크기 높이를 사용합니다.

기본 크기 (Default size)	높이 (px/rem)	사용 사례 (Use case)
Small (sm)	32 / 2	공간이 제한되거나 길고 복잡한 폼에 select를 배치할 때 사용.
Medium (md)	40 / 2.5	기본 크기이며 가장 흔히 사용되는 크기. 확신이 없으면 중간 크기를 사용.
Large (lg)	48 / 3	작업할 공간이 많을 때 사용. 큰 크기는 보통 단순한 폼이나 select가 페이지에 단독으로 배치될 때 사용.

플루이드 입력 높이 (Fluid inputs heights)

플루이드 select에는 입력 높이가 하나뿐이에요. 목록 높이는 브라우저가 제어합니다.

너비 (Width)

select에 최소·최대 너비는 없어요. 너비는 그 맥락에 맞게 사용자화할 수 있습니다.

콘텐츠 (Content)

주요 요소 (Main elements)

라벨 (Label)

텍스트 및 데이터 입력에 대한 간결한 라벨은 사용자가 무엇을 요청받는지 이해하도록 도와줘요.

라벨은 select 옵션 목록에서 무엇을 기대하는지 사용자에게 알려줘요.
라벨은 헬퍼 텍스트가 아닙니다. 간결하게 한세 단어만 사용하세요.

헬퍼 텍스트 (Helper text)

헬퍼 텍스트는 사용자가 select 목록에서 올바른 선택을 하도록 돕는 관련 정보예요.
헬퍼 텍스트는 선택 사항이지만 이러한 상태가 나타나면 경고 또는 오류 텍스트로 대체됩니다.

목록 순서 (List order)

해당되는 경우 목록은 알파벳 순서 또는 콘텐츠에 상대적인 증가 순서여야 해요. 그렇지 않으면 select 목록의 순서는 사용 빈도에 기반해야 합니다.

공통 동작 (Universal behaviors)

상태 (States)

select는 기본과 인라인 변형 모두에 여러 인터랙션 상태가 있어요: enabled, hover, selected, focus, open, error, warning, disabled, skeleton, read-only.

상태 (State)	언제 사용하나요 (When to use)
Enabled	select가 활성화되어 있고 사용자가 직접 상호작용하지 않을 때. 보통 컴포넌트의 기본 또는 정상 상태라고 함. 활성 select 필드는 기본값을 포함해야 함.
Hover	사용자의 마우스 커서가 필드 위에 있을 때.
Selected	사용자가 목록을 열고 목록 안의 옵션을 선택했을 때.
Focus	사용자가 select 필드에 탭하거나 클릭하면 필드가 포커스되어, 사용자가 컴포넌트로 성공적으로 이동했음을 나타냄.
Open	사용자가 목록을 열었을 때.
Error	"required"로 표시된 select 컴포넌트에서 옵션이 선택되지 않았을 때. 시스템 오류로 인해 발생할 수도 있음. 데이터를 제출·저장하기 전에 사용자 응답이 필요함.
Warning	예외 조건에 사용자의 주의를 환기해야 할 때. 그 조건은 오류가 아닐 수 있지만 해결되지 않으면 문제를 일으킬 수 있음.
Disabled	사용자가 컴포넌트와 상호작용할 수 없고 모든 인터랙티브 기능이 제거되었을 때. 읽기 전용 상태와 달리 비활성 상태는 포커스할 수 없고, 화면 판독기로 읽히지 않으며, 시각 대비를 통과할 필요가 없어 해석이 필요하면 접근성이 떨어짐.
Skeleton	초기 페이지 로드 시 select가 아직 완전히 로드되지 않았음을 나타내는 데 사용.
Read-only	사용자가 컴포넌트를 검토할 수 있지만 수정할 수 없을 때. 비활성 상태처럼 모든 인터랙티브 기능을 제거하지만 여전히 포커스 가능하고, 화면 판독기로 접근 가능하며, 가독성을 위해 시각 대비를 통과함.

Default
Fluid

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 chevron 아이콘을 클릭하거나 필드 안 아무 곳이나 클릭해 목록을 열고 닫을 수 있어요. 옵션을 선택하려면 사용자가 옵션 목록 안 아무 곳이나 클릭할 수 있습니다.

Default
Fluid

키보드 (Keyboard)

드롭다운 필드는 포커스를 받는 요소예요. 모든 키보드 인터랙션은 이 요소에서 발생합니다.
사용자는 Space, Enter, Down arrow, Up arrow를 눌러 목록을 열 수 있어요.
사용자는 Down arrow를 눌러 강조된 옵션을 다음 옵션으로 이동할 수 있습니다.
사용자는 Up arrow를 눌러 강조된 옵션을 이전 옵션으로 이동할 수 있습니다.
사용자는 Escape, Space, Enter를 눌러 목록을 닫을 수 있어요.
Default
Fluid

검증 (Validation)

유효하지 않음 (Invalid)

실시간 검증은 폼 작성 과정을 간소화하는 데 도움이 돼요. 데이터가 유효하지 않거나 필수 필드가 비어 있으면 오류 상태가 트리거됩니다. 오류 상태에는 잘못된 콘텐츠를 나타내는 세 가지 시각적 표시가 있어요: 빨간 테두리, 오류 아이콘 표시, 오류 메시지.

Default
Fluid

AI 존재 (AI presence)

select에는 입력에 AI 라벨이 있을 때 AI 시각적 스타일링을 취하는 수정(modification)이 있어요. AI 변형은 AI 라벨이 추가된 것 외에는 일반 버전과 동일하게 동작하며, AI 라벨은 시각적 표시이자 설명 가능성 팝오버의 트리거 역할을 합니다.

AI용 디자인에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.

Default
Fluid

AI로 되돌리기 (Revert to AI)

select는 사용자 인터랙션에 따라 AI 변형과 비-AI 변형 사이를 전환할 수 있어요. 사용자가 AI가 제안한 콘텐츠를 수동으로 재정의하면 입력은 AI 변형에서 비-AI 변형으로 바뀝니다. 편집 후에도 사용자는 revert to AI 버튼을 통해 처음에 AI로 생성된 콘텐츠로 다시 전환할 수 있어야 해요.

Default
Fluid

선택할 옵션이 세 개 미만이라면 라디오 버튼(radio button) 그룹을 대신 사용하세요.
다중 선택이 필요하다면 드롭다운(dropdown)을 대신 사용하세요. 드롭다운 옵션은 현재 컨텍스트 밖으로 이동하거나 기존 콘텐츠를 필터·정렬하는 액션을 취하는 데 사용됩니다.

더 알아보기 (Learn more)

select는 폼에서 옵션 목록에서 하나를 고르는 데 쓰는 네이티브 스타일의 입력 컴포넌트예요. 목록에서 여러 개를 고르거나 필터·정렬 액션이 필요하면 드롭다운을, 옵션이 세 개 미만이면 라디오 버튼을 쓰세요. 한 페이지의 폼 컴포넌트 크기를 일관되게 유지하고, 라벨은 간결하게 두는 게 핵심입니다.