Select
Select 컴포넌트는 사용자가 옵션 중 하나를 선택하도록 할 때 사용됩니다.
프로젝트 초기 단계에서 Shape, Size, Placeholder 등의 옵션을 결정하여 일관된 사용성을 유지하도록 합니다.
접근성(Accessibility) 안내
<select> 요소는 반드시 <label>과 함께 사용해야 합니다.
시각적으로 라벨을 숨기고 싶을 경우, .visually-hidden 클래스를 사용해 스크린 리더 사용자에게 라벨 정보를 제공하세요.
라벨과 셀렉트를 연결하려면 for 속성과 id 속성을 정확히 지정해야 합니다.
Shapes
요쇼의 기본 형태는 Squircle 또는 Square 중 하나로 설정하며, 프로젝트 초기 단계에서 선택하여 전체 UI에 일관되게 적용합니다.
| Default (Squircle) | is-pill |
|---|---|
|
|
|
States
| Default | :checked | :disabled |
|---|---|---|
|
|
|
|
Placeholder
Select에 Placeholder 역할을 할 option을 설정할 수 있습니다.
아래 예시는 옵션 선택 방식과 시각적 동작 차이를 설명합니다.
| placeholder |
|
|
|---|---|---|
| 1️⃣ placeholder |
|
|
| 2️⃣ placeholder |
|
|