選擇與輸入元件
不是每個有選項的欄位，都叫 Dropdown。
先問一次選幾個、清單要不要直接看見、使用者能不能輸入，以及輸入是否必須是既有資料；答案會直接決定元件。
選型流程
四個問題，先排除錯誤選項。
- 一次需要選多個值嗎？是：先評估 Multi-select；若每項有獨立設定，改用 Checkbox Group。
- 選項要直接露出嗎？是：有限選項可使用 Listbox。
- 使用者需要輸入文字嗎？不需要：少量固定選項優先使用 Select。
- 輸入後是否只能選既有資料？是：使用 Combobox；否：才評估 Autocomplete。
比較表
同樣有清單，互動契約完全不同。
點選元件名稱，可查看各自的介紹頁與選型界線。
| 比較面向 | Select｜選擇欄 | Listbox｜選項清單 | Combobox｜組合式選擇框 | Autocomplete｜自動完成輸入框 | Multi-select｜多重選擇欄 |
|---|---|---|---|---|---|
| 輸入方式 | 不能輸入 | 不能輸入 | 可輸入後選取 | 可輸入並接受建議 | 通常不能輸入 |
| 選項來源 | 固定、數量較少 | 固定、直接露出 | 既有資料，可動態載入 | 建議資料，也可允許自訂 | 既有資料，可選多項 |
| 適合情境 | 選國家、狀態等 | 直接比較有限選項 | 選部門、選成員等 | 搜尋地址、產品、關鍵字等 | 選多個專案、標籤或權限 |
| 不適合情境 | 選項非常多 | 選項過多或需搜尋 | 允許任意自訂值 | 必須限制既有資料 | 每個選項有獨立設定意義 |
| 選型結論 | 少量固定選項 | 清單需直接可見 | 大量既有資料需搜尋 | 可以接受自由輸入 | 同一欄位要選多個既有值 |
這組結論
「選擇既有部門」是 Combobox，不是泛稱的 Dropdown。
因為使用者需要輸入關鍵字、選項可能由 API 載入，而且不能自行建立部門值。若要直接看見有限清單，才選 Listbox；若要同時選多個既有專案，選 Multi-select。
操作 Combobox Demo →