# Select

정해진 목록에서 하나를 고르게 하는 선택 컴포넌트입니다. 목록은 같은 자리에서 펼쳐집니다.

> 원본: `03_ASSET_GUIDE/catalog/select.js` · CSS: `03_ASSET_GUIDE/styles/elements/select.css`
> kind `element` · category `selection` · status `stable` · specSource `measured`

---

## 1. 구성

닫혀 있을 때 보이는 **Trigger** 와, 열렸을 때 나타나는 **Listbox** 두 부분으로 나뉩니다.
Option 은 아이콘, 라벨, 설명, 선택 체크를 가질 수 있습니다.

```
┌──────────────────────────────────┐
│ 최신 순                      ⌄  │  ① Trigger  ② Value  ③ Caret
└──────────────────────────────────┘
┌──────────────────────────────────┐
│ 정렬                             │  ④ Listbox  ⑤ Group label
│ ┌──────────────────────────────┐ │
│ │ 최신 순                   ✓  │ │  ⑥ Option + Check
│ └──────────────────────────────┘ │
│   인기 순                        │
└──────────────────────────────────┘
```

- **Trigger** — 현재 값과 Caret 을 보여주는 버튼입니다.
- **Caret** — 열리면 180° 회전해 상태를 알립니다.
- **Listbox** — 선택지 목록. 트리거 바로 아래에 붙습니다.
- **Group label** — 선택지가 많을 때 묶음의 이름입니다.
- **Option** — 라벨은 필수, 아이콘과 설명은 선택입니다.
- **Check** — 현재 선택된 항목에만 나타납니다.

| # | 요소 | 필수 | 클래스 | 설명 |
|---|---|---|---|---|
| — | Root | 필수 | `atom-select` | Trigger 와 Listbox 를 감쌉니다. `data-state` · `data-invalid` · `data-disabled` 가 여기에 붙습니다. |
| ① | Trigger | 필수 | `atom-select__trigger` | 현재 값과 Caret 을 보여주는 버튼입니다. |
| ② | Value | 필수 | `atom-select__value` | 선택된 값 또는 Placeholder. |
| ③ | Caret | 필수 | `atom-select__caret` | 열리면 180° 회전해 상태를 알립니다. |
| ④ | Listbox | 열렸을 때 | `atom-select__listbox` | 선택지 목록. 트리거 바로 아래에 붙습니다. |
| ⑤ | Group label | 선택 | `atom-select__group-label` | 선택지가 많을 때 묶음의 이름입니다. |
| ⑥ | Option | 필수 | `atom-select__option` | 라벨은 필수, 아이콘과 설명은 선택입니다. |
| — | Option icon | 선택 | `atom-select__option-icon` | 20px 아이콘. |
| — | Option text | 필수 | `atom-select__option-text` | Label 과 Description 을 세로로 쌓습니다. |
| — | Option label | 필수 | `atom-select__option-label` | 500 굵기 라벨. |
| — | Option description | 선택 | `atom-select__option-description` | 12px 설명. |
| — | Check | 필수 | `atom-select__option-check` | 현재 선택된 항목에만 나타납니다. |
| — | Empty | 빈 목록일 때 | `atom-select__empty` | 선택지가 없을 때 Listbox 안의 한 줄 안내. |

---

## 2. 종류 / 크기

### 열린 상태

선택지가 8개를 넘으면 그룹으로 묶고, 선택할 수 없는 항목은 목록에서 빼는 대신
`aria-disabled` 와 이유를 함께 남깁니다.

Listbox 는 Trigger 아래 6px 간격으로 붙고, 자체 패딩 6px 안에 Option 이 놓입니다.
Option 행 높이는 폰트 14px 에 패딩 9px 10px 입니다.

Option 은 네 조각으로 구성됩니다 — Icon(20px) · Label(500 굵기) · Description(12px) ·
Check(18px). Check 는 `aria-selected="true"` 일 때만 `opacity: 1` 이 됩니다.

> [!WARNING]
> **Listbox 의 최대 높이가 없습니다**
> `max-height` 도 `overflow` 도 지정되어 있지 않아, 선택지가 많으면 Listbox 가 화면 밖까지
> 늘어납니다. 위치 계산과 함께 최대 높이·내부 스크롤을 정해야 합니다.
> 필요한 처리는 `max-height`, `overflow-y: auto`, 아래쪽 공간이 부족할 때 위로 뒤집기
> 세 가지입니다.

### Variant

`weak` 가 기본입니다. 같은 폼 안의 [Input](./text-input.md) 이 테두리를 쓰고 있다면,
시각적 통일을 위해 `outline` 을 씁니다.

| Variant | Trigger 배경 | 테두리 |
|---|---|---|
| `weak` (기본) | `--atom-bg-neutral-weak` | 없음 |
| `outline` | `--atom-bg-layer` | `--atom-border-default` 1px inset |

기본이 `weak` 인 것이 [Input](./text-input.md)(기본 `outline`)과 반대라는 점에
주의하세요. 두 컴포넌트를 같은 폼에 놓으면 한쪽을 맞춰야 합니다.

### Size

정렬 드롭다운처럼 툴바 안에 들어갈 때는 `small`, 폼 안에서는 `medium` 이상을 씁니다.

| Size | Trigger 높이 | 모서리 | 폰트 | Caret |
|---|---|---|---|---|
| `small` | 40px | 8px | 14px | 16px |
| `medium` | 48px | 8px | 15px | 18px |
| `large` | 56px | 12px | 16px | 18px |

> [!NOTE]
> **높이는 컨트롤 공통 토큰입니다**
> 40 · 48 · 56px 은 `--atom-control-h-small` · `--atom-control-h` · `--atom-control-h-large`
> 이고, [Input](./text-input.md) · [Date Input](./date-input.md) ·
> [Time Input](./time-input.md) · [Input Button](./input-button.md) 이 같은 값을
> 씁니다. 같은 `size` 를 주면 한 줄에 나란히 놓아도 어긋나지 않습니다.

[Field](./field.md) 의 Control 슬롯에 넣을 때는 `--variant_outline` 을 씁니다. 기본
`weak` 는 테두리가 없어서, 테두리를 가진 Input 옆에 서면 같은 줄로 읽히지 않습니다.

### 빈 목록

검색 결과가 없으면 빈 Listbox 대신 무엇을 바꿔야 하는지 알려주는 한 줄을 표시합니다.

### Field 와 함께

라벨·도움말은 [Form Field](./field.md) 로 감싸서 붙입니다.

### 클래스 계약

`styles/elements/select.css` 헤더와 원본 `registry.json` `css.blocks` 기준입니다. 클래스가 없는 값(—)은 기본 스타일 그대로입니다.

| Prop | 값 | 클래스 |
|---|---|---|
| `size` | `small` · `medium` · `large` | `--size_small` · — · `--size_large` |
| `variant` | `weak` · `outline` | — · `--variant_outline` |
| (값 없음) | `value` 가 없거나 options 에 없음 | `--empty` |

상태 선택자: `[data-state="closed\|open"]` · `[data-invalid]` · `[data-disabled]` · `:hover` · `:focus-visible` · Option 의 `[aria-selected="true"]` · `[aria-disabled="true"]`

> `--empty` 는 CSS 에 정의되어 있지만 헤더 주석에는 빠져 있습니다(원본 registry `css-defined-not-declared`).
> CSS 에는 `.atom-select__trigger--empty` 도 같은 규칙으로 정의되어 있으나 registry 블록에 없어 구현은 루트의 `--empty` 만 씁니다.

---

## 3. 상태

`closed` 와 `open` 이 기본 상태이고, 여기에 `invalid` 와 `disabled` 가 겹칩니다.
값이 없으면 `--empty` 로 Value 를 흐리게 둡니다.

| State | 표현 | 선택자 |
|---|---|---|
| `closed` | Listbox `display: none` | `[data-state="closed"]` |
| `open` | Listbox 노출, Caret 180° 회전 | `[data-state="open"]` |
| `hover` | Trigger `filter: brightness(0.96)` | `:hover` |
| `empty` | Value 를 `--atom-fg-neutral-subtle` 로 | `--empty` |
| `focus` | Trigger 안쪽에 2px `--atom-primary-600` 링 | `:focus-visible` |
| `invalid` | Trigger 테두리 2px 오류 색 | `[data-invalid]` |
| `disabled` | `opacity: 0.4`, `pointer-events: none` | `[data-disabled]` |

---

## 4. Props

| Prop | Type | Default | 필수 | 설명 |
|---|---|---|---|---|
| `value` | `string` | | | 선택된 항목의 값입니다. |
| `placeholder` | `string` | | | 값이 없을 때 Trigger 에 보이는 문구입니다. |
| `options` | `Array<{ value, label, description?, icon?, disabled? }>` | | ● | 선택지 목록입니다. |
| `size` | `"small" \| "medium" \| "large"` | `"medium"` | | Trigger 높이와 폰트 크기를 결정합니다. |
| `variant` | `"weak" \| "outline"` | `"weak"` | | Trigger 의 배경과 테두리 처리입니다. |
| `invalid` | `boolean` | `false` | | Trigger 테두리를 오류 색으로 바꿉니다. |
| `disabled` | `boolean` | `false` | | 열 수 없게 만듭니다. |
| `emptyText` | `string` | `"결과가 없어요"` | | 선택지가 비었을 때 Listbox 에 보일 문구입니다. |
| `onValueChange` | `(value: string) => void` | | | 선택이 바뀔 때 호출됩니다. |

구현이 추가로 받는 props (원본 Props 표에 없음 — controlled/uncontrolled 와 재사용을 위한 것):

| Prop | Type | Default | 설명 |
|---|---|---|---|
| `options` 의 그룹 항목 | `{ label: string; options: SelectOption[] }` | | `options` 에 섞어 넣으면 Group label 을 붙여 묶습니다. |
| `defaultValue` | `string` | | uncontrolled 일 때 처음 선택된 값입니다. |
| `open` · `defaultOpen` · `onOpenChange` | `boolean` · `boolean` · `(open) => void` | `defaultOpen=false` | 열림 상태 controlled / uncontrolled. |
| `name` | `string` | | 지정하면 hidden input 으로 값을 폼에 함께 보냅니다. |
| `triggerId` | `string` | | Trigger(`<button>`) 의 id. Field 안에서는 Field 가 정합니다. |

`size` 를 지정하지 않으면 [Field](./field.md) 의 `size` 를 따르고, Field 밖이면 `"medium"` 입니다.

### Parts (compound)

Select 는 원본 Props 대로 `options` 로 목록을 받는 단일 컴포넌트입니다. 렌더되는 요소는 아래와 같습니다.

| Part | 요소 | 설명 |
|---|---|---|
| `Select` | `<div class="atom-select">` | Root. 위 Props 를 받습니다. 나머지 HTML 속성은 Root 에 붙습니다(`aria-describedby` 는 Trigger 로). |
| (Trigger) | `<button type="button" aria-haspopup="listbox">` | `aria-expanded` · `aria-controls` · `aria-activedescendant`. 열려 있는 동안에도 포커스가 머뭅니다. |
| (Listbox) | `<div role="listbox">` | 열렸을 때만 렌더합니다. |
| (Group) | `<div role="group">` + `atom-select__group-label` | 그룹 항목마다 하나. |
| (Option) | `<div role="option" aria-selected>` | 비활성은 `aria-disabled="true"`. 키보드 현재 항목에 `data-active`. |

---

## 5. Component tokens

| 대상 | 속성 | Token | Value |
|---|---|---|---|
| Trigger | gap | `{space.x3}` | 12px |
| Trigger | padding-inline | `{space.x4}` | 16px |
| Trigger | radius | `{radius.r2}` | 8px |
| Trigger (`large`) | radius | `{radius.r3}` | 12px |
| Trigger (`weak`) | background | `{color.bg.neutral-weak}` | |
| Trigger (`outline`) | background · border | `{color.bg.layer}` · `{color.border.default}` 1px inset | |
| Trigger | color | `{color.fg.neutral}` | |
| Value (비었을 때) | color | `{color.fg.neutral-subtle}` | |
| Caret | color | `{color.fg.neutral-muted}` | |
| Caret | transition | `{duration.base}` · `{easing.out}` | 200ms |
| Listbox | radius | `{radius.r3}` | 12px |
| Listbox | background | `{color.bg.layer}` | |
| Listbox | shadow | `{shadow.s2}` + `{color.border.subtle}` 1px inset | |
| Group label | color | `{color.fg.neutral-subtle}` | 11px / 600 |
| Option | radius | `{radius.r2}` | 8px |
| Option (선택·hover) | background | `{color.bg.neutral-weak}` | |
| Option label | color | `{color.fg.neutral}` | 500 굵기 |
| Option description | color | `{color.fg.neutral-muted}` | 12px |
| Option icon · check | color | `{color.fg.neutral-muted}` · `{color.fg.neutral}` | 20px · 18px |
| Empty | color | `{color.fg.neutral-subtle}` | 13px |
| Empty | padding | `{space.x5}` 10px | 20px 10px |
| Trigger | height | `{control.h}` | 48px |
| Trigger (`small` · `large`) | height | `{control.h-small}` · `{control.h-large}` | 40 · 56px |
| Trigger (`outline`) | border | `{control.border}` | `{color.border.default}` 1px inset |
| focus | ring | `{control.border-focus}` | `{color.primary.600}` 2px inset |
| invalid | border | `{control.border-invalid}` | `{color.fg.critical}` 2px inset |
| transition | duration | `{duration.fast}` | 120ms |

Listbox 간격·패딩(6px), Option 패딩(9px 10px), Option gap(10px),
폰트(11 · 12 · 13 · 14 · 15 · 16px)는 토큰이 아닙니다.

> [!NOTE]
> **선택 표시가 hover 와 같은 색입니다**
> `[aria-selected="true"]` 와 `:hover` 가 둘 다 `--atom-bg-neutral-weak` 를 씁니다.
> Check 아이콘이 있어 구분은 되지만, 마우스를 올린 항목과 선택된 항목이 같아 보입니다.
> 선택 표시에 별도 배경(예: `--atom-bg-nav-active`)을 쓰는 편이 명확합니다.

```json
{
  "select": {
    "trigger": {
      "gap":            { "$type": "dimension", "$value": "{space.x3}" },
      "padding-inline": { "$type": "dimension", "$value": "{space.x4}" },
      "radius": {
        "$type": "dimension",
        "default": { "$value": "{radius.r2}" },
        "large":   { "$value": "{radius.r3}" }
      },
      "height": {
        "$type": "dimension",
        "default": { "$value": "{control.h}" },
        "small":   { "$value": "{control.h-small}" },
        "large":   { "$value": "{control.h-large}" }
      },
      "color": { "$type": "color", "$value": "{color.fg.neutral}" },
      "weak":    { "bg": { "$type": "color", "$value": "{color.bg.neutral-weak}" } },
      "outline": {
        "bg":     { "$type": "color", "$value": "{color.bg.layer}" },
        "border": { "$type": "shadow", "$value": "{control.border}" }
      },
      "focus":   { "$type": "shadow", "$value": "{control.border-focus}" },
      "invalid": { "$type": "shadow", "$value": "{control.border-invalid}" },
      "transition": { "$type": "duration", "$value": "{duration.fast}" }
    },
    "value-empty": { "$type": "color", "$value": "{color.fg.neutral-subtle}" },
    "caret": {
      "color":      { "$type": "color", "$value": "{color.fg.neutral-muted}" },
      "duration":   { "$type": "duration", "$value": "{duration.base}" },
      "easing":     { "$type": "cubicBezier", "$value": "{easing.out}" }
    },
    "listbox": {
      "radius": { "$type": "dimension", "$value": "{radius.r3}" },
      "bg":     { "$type": "color", "$value": "{color.bg.layer}" },
      "shadow": { "$type": "shadow", "$value": "{shadow.s2}" },
      "border": { "$type": "color", "$value": "{color.border.subtle}" }
    },
    "group-label": { "$type": "color", "$value": "{color.fg.neutral-subtle}" },
    "option": {
      "radius":          { "$type": "dimension", "$value": "{radius.r2}" },
      "bg-selected":     { "$type": "color", "$value": "{color.bg.neutral-weak}" },
      "label":           { "$type": "color", "$value": "{color.fg.neutral}" },
      "description":     { "$type": "color", "$value": "{color.fg.neutral-muted}" },
      "icon":            { "$type": "color", "$value": "{color.fg.neutral-muted}" },
      "check":           { "$type": "color", "$value": "{color.fg.neutral}" }
    },
    "empty": {
      "color":         { "$type": "color", "$value": "{color.fg.neutral-subtle}" },
      "padding-block": { "$type": "dimension", "$value": "{space.x5}" }
    }
  }
}
```

---

## 6. 접근성

- **Trigger** — `<button>` 에 `aria-haspopup="listbox"` 와 `aria-expanded` 를 씁니다.
  `aria-expanded` 는 열림 상태에 따라 바뀌어야 합니다. `data-state` 는 겉모습만
  바꿉니다.
- **Listbox · Option** — `role="listbox"` 안에 `role="option"` 을 두고 각 항목에
  `aria-selected` 를 지정합니다. 선택된 항목은 하나뿐입니다.
- **키보드** — 아래 동작이 필요합니다. 현재 CSS 에는 상태 선택자만 있고 이 동작은
  스크립트로 구현해야 합니다.

| 키 | 동작 |
|---|---|
| `Enter` · `Space` · `↓` | 닫혀 있으면 Listbox 를 엽니다 |
| `↑` `↓` | 항목 사이를 이동합니다 |
| `Home` · `End` | 첫 · 마지막 항목으로 이동합니다 |
| 글자 입력 | 해당 글자로 시작하는 항목으로 점프합니다 |
| `Enter` | 현재 항목을 선택하고 닫습니다 |
| `Esc` | 선택하지 않고 닫습니다 |
| `Tab` | 닫고 다음 요소로 이동합니다 |

- **포커스 관리** — 열려 있는 동안 포커스는 **Trigger 에 머물고**,
  `aria-activedescendant` 로 현재 항목을 가리킵니다. 닫힌 뒤 포커스는 Trigger 로
  되돌립니다.
- **비활성 항목** — `aria-disabled="true"` 를 씁니다. `disabled` 속성과 달리
  `aria-disabled` 항목은 화살표 이동으로 도달할 수 있어 존재와 이유를 알 수 있습니다.
- **바깥 클릭** — Listbox 밖을 누르면 닫혀야 하고, 그때도 포커스가 Trigger 로 돌아가야
  합니다.
- **Label** — [Form Field](./field.md) 로 감싸 `aria-labelledby` 를 연결합니다.
  라벨 없는 Select 는 무엇을 고르는지 알 수 없습니다.
- **대비** — `outline` variant 의 테두리 `--atom-border-default` 는 흰 배경 대비
  **1.36:1** 로 WCAG 1.4.11 의 3:1 에 미달합니다. `weak` variant 는 배경색
  차이(`--atom-bg-neutral-weak` vs `--atom-bg-canvas`)로 경계를 나타내는데 이 대비도
  약 1.06:1 로 매우 낮습니다. **Trigger 가 조작 가능한 요소로 보이지 않을 수 있습니다.**
  [Color](../foundation/color.md) 참조.
- **Placeholder 대비** — `--atom-fg-neutral-subtle`(2.57:1)이므로 값이 없는 Trigger 의
  문구를 읽기 어렵습니다.
- **포커스 표시** — Trigger 에 전용 포커스 규칙이 없어 `base.css` 의 공통
  `:focus-visible` 이 적용됩니다. Listbox 가 열려 있을 때도 Trigger 에 링이 남아야
  포커스 위치를 알 수 있습니다.

> 구현: 위 키보드 표를 모두 구현합니다(글자 입력은 0.5초 안에 이어 친 글자를 접두어로 찾고, 같은 글자를 반복하면 다음 항목으로 순환). 
> Field 안에서는 Trigger 의 `aria-labelledby` 가 "Field 라벨 + 현재 값" 을, Listbox 의 `aria-labelledby` 가 Field 라벨을 가리킵니다.
> 그룹은 `role="group"` 으로 묶고 Group label 을 그 이름으로 연결합니다(원본 Markup 의 `<p>` 는 listbox 의 허용 자식이 아님).

---

## 7. 사용 가이드

### 선택지 순서

가장 많이 고르는 항목을 위에 두고, 그 항목을 기본값으로 켜둡니다. 순서에 자연스러운
규칙(가나다, 숫자 크기)이 있다면 그것을 따르세요.

- ✅ **Do** 가장 흔한 항목이 맨 위이고, 기본값으로 선택되어 있습니다.
- ❌ **Don't** 순서에 규칙이 없고, 아무것도 선택되어 있지 않습니다.

### Option 설명은 한 줄

설명은 선택지 사이의 차이를 가르는 데만 씁니다. 두 줄을 넘어가면 목록을 훑어볼 수 없게
되므로, 긴 안내는 선택 후 화면에서 하세요.

- ✅ **Do** 차이를 가르는 짧은 한 줄만 붙입니다.
- ❌ **Don't** 긴 안내문을 Option 안에 넣지 않습니다.

### 다른 선택 컴포넌트와 구분하기

| 상황 | 쓸 컴포넌트 |
|---|---|
| 선택지 2~5개, 전부 보여주고 싶다 | [Radio](./radio.md) |
| 선택지 6개 이상, 같은 자리에서 펼친다 | **Select** |
| 선택지가 아주 많고 **검색**이 필요하다 | Combobox |
| 여러 개를 함께 고른다 | [Checkbox](./checkbox.md) |
| 값을 고르는 게 아니라 **액션을 실행**한다 | Dropdown |

Select 와 Dropdown 을 혼동하기 쉽습니다. **값이 남으면 Select, 액션이 실행되면 Dropdown**
입니다. Select 는 닫힌 뒤에도 고른 값이 Trigger 에 남아 있고, Dropdown 은 아무것도
남지 않습니다.

### 선택지가 많아지면 검색을 붙입니다

스크롤을 여러 번 해야 할 만큼 선택지가 많으면 목록을 훑어보기 어렵습니다. 대략 20개를
넘으면 Combobox 를 고려하세요.

- ✅ **Do** 8~20개는 그룹으로 묶어 Select 로 둡니다.
- ⚠️ **Caution** 20개를 넘으면 검색이 있는 컨트롤로 바꿉니다.
- ❌ **Don't** 국가 목록처럼 200개를 Select 로 두지 않습니다.

### Placeholder 를 기본값처럼 쓰지 않습니다

"선택하세요" 만 띄워 두면 항상 목록을 열어야 합니다. 적절한 기본값이 있으면 미리 선택해
둡니다.

- ✅ **Do** 가장 흔한 값을 기본 선택으로 둡니다.
- ❌ **Don't** 정답이 뻔한데 Placeholder 로 비워 두지 않습니다.

'선택하지 않음' 자체가 유효한 답일 때만 비워 둡니다.

### 선택 항목은 다시 비울 수 있게 합니다

Placeholder 는 옵션 목록에 없으므로, 한 번 값을 고르면 빈 상태로 되돌릴 수 없습니다.
필수 항목이면 이 동작을 그대로 둡니다. 값을 고른 시점에 답이 정해졌고, 비어 있으면 저장할
때 검증 오류로 알립니다.

필수가 아닌 항목은 목록 맨 위에 "선택 안 함" Option(`value: ""`)을 두어 언제든 비울 수
있게 합니다. 이 Option 은 값을 고른 뒤에도 목록에 남아 있습니다.

- ✅ **Do** 필수 항목은 값을 고르면 Placeholder 상태로 돌아가지 않습니다.
- ✅ **Do** 필수가 아닌 항목은 "선택 안 함" Option 을 목록에 항상 둡니다.
- ❌ **Don't** 필수가 아닌 항목인데 한 번 고르면 비울 방법이 없습니다.

[Radio](./radio.md) 로 바꿔도 같습니다. 라디오도 고른 뒤에는 해제할 수 없으므로,
필수가 아니면 "해당 없음" 선택지를 둡니다.

### 선택할 수 없는 항목은 숨기지 않습니다

목록에서 빼면 그 선택지가 있다는 것을 알 수 없습니다. `aria-disabled` 로
남겨 두고 왜 고를 수 없는지 Description 에 적습니다.

- ✅ **Do** "품절" 처럼 이유를 적어 비활성으로 남깁니다.
- ❌ **Don't** 조건에 맞지 않는 항목을 안내 없이 제거하지 않습니다.

### 모바일에서는 네이티브 select 를 고려합니다

`<select>` 를 그대로 쓰면 OS 의 휠·목록 UI 가 뜨고 접근성도 기본으로 제공됩니다.
디자인을 통제할 필요가 없으면 네이티브를 고려합니다.
선택지가 많은 모바일 화면에서는 Bottom Sheet(`bottom-sheet`)로 여는 방식도 있습니다.

### 관련 컴포넌트

- [Radio](./radio.md) — 선택지가 적어 전부 보여줄 때.

---

## 8. 예시

```tsx
const [sort, setSort] = useState("latest");

<Select
  variant="outline"
  value={sort}
  onValueChange={setSort}
  options={[
    {
      label: "인기 카테고리",
      options: [
        { value: "digital", label: "디지털기기" },
        { value: "furniture", label: "가구·인테리어", description: "준비 중이에요", disabled: true },
      ],
    },
  ]}
/>

<Select placeholder="선택해주세요" options={[]} emptyText="일치하는 값 없음" />
```

```html
<div class="atom-select" data-state="open">
  <button class="atom-select__trigger" type="button"
          aria-haspopup="listbox" aria-expanded="true">
    <span class="atom-select__value">디지털기기</span>
    <svg class="atom-select__caret" aria-hidden="true">
      <use href="#atom-i-chevron-down" />
    </svg>
  </button>

  <div class="atom-select__listbox" role="listbox">
    <p class="atom-select__group-label">인기 카테고리</p>
    <div class="atom-select__option" role="option" aria-selected="true">
      <span class="atom-select__option-text">
        <span class="atom-select__option-label">디지털기기</span>
      </span>
      <svg class="atom-select__option-check" aria-hidden="true">
        <use href="#atom-i-check" />
      </svg>
    </div>
    <div class="atom-select__option" role="option" aria-selected="false"
         aria-disabled="true">
      <span class="atom-select__option-text">
        <span class="atom-select__option-label">가구·인테리어</span>
        <span class="atom-select__option-description">준비 중이에요</span>
      </span>
    </div>
  </div>
</div>
```