設計系統

深色模式

Select 選擇器 ​

從較多選項中挑選,平時收合以節省空間。使用 Element Plus 的 el-select。

設計準則 ​

  • 選項 5 個以上用 select;5 個以內優先 radio / checkbox(一眼可見、少一次點擊)
  • 選項超過 10 個加 filterable,讓使用者用打字縮小範圍
  • 多選用 multiple,並加上 collapse-tags + collapse-tags-tooltip,避免選多了撐爆版面
  • placeholder 統一寫「請選擇」或「請選擇○○」;篩選器的「不限」狀態用 placeholder「全部○○」表達
  • 非必填欄位、篩選器加 clearable
  • 尺寸跟著情境走:後台表單用預設,表格內、工具列用 small;同一張表單不混用
  • 選項文字避免長到被截斷;真的太長時縮短文案,而不是加寬下拉

基本用法 ​

loading

尺寸 ​

loading

禁用 ​

用於「前置條件未完成」時鎖住整個欄位,並在附近說明要先做什麼:

loading

禁用選項 ​

暫時不可選的選項保留在列表裡並禁用,在選項文字裡帶出原因,讓使用者知道它存在、去哪裡啟用; 永遠不可選的東西則直接不要放進列表:

loading

可清空 ​

篩選器必加 clearable:清空 = 回到「全部」,不用為「不限」多做一個選項:

loading

多選 ​

多選 + 可搜尋 + 收合標籤的標準組合:

loading

自訂模板 ​

選項可以帶次要資訊(人數、描述)幫助判斷,主資訊靠左、次要資訊靠右用次要文字色; 高度維持一行,不要做兩行選項:

loading

下拉選單頭部、底部 ​

header 放批次操作:多選時放「全選」勾選框(用半選狀態呈現部分勾選); footer 放「管理○○」入口——讓使用者就地前往維護選項,是「創建新選項」之外更可控的做法:

loading

分組 ​

選項天然有類別、且類別數不多時用 el-option-group;分組標題只是視覺分隔,不可選。 若每組都很長,考慮拆成兩個連動的 select(先選類別、再選項目):

loading

篩選選項 ​

選項超過 10 個加 filterable:

loading

創建新選項 ​

allow-create 只用於「開放詞彙」欄位(自由標籤這類本來就允許使用者自造的值), 必須搭配 filterable;正式的選項清單(狀態、分類)仍走管理介面維護。 開放前和工程師確認後端會做去重與正規化(去空白、大小寫),避免髒資料:

loading

自訂標籤(顏色) ​

用 #tag slot 自訂已選標籤的呈現。典型場景是「選項本身就是顏色」(標籤色、圖表色): 已選區直接顯示色塊,下拉選項用色塊 + 同色文字。 可選顏色一律來自擴充色盤十色的 500 階,不開放任意色碼:

loading

Do / Don't ​

✅ Do❌ Don't
5 個以上選項才用 select2 個選項也用 select(用 radio)
超過 10 個選項加 filterable讓使用者在長列表裡慢慢捲
多選加 collapse-tags選 10 個標籤把表單撐爆
placeholder「請選擇」placeholder 寫欄位名稱
篩選器 clearable = 回到全部多做一個「不限」選項
allow-create 只給自由標籤 + 後端去重狀態、分類也讓使用者隨打隨建
顏色選項限擴充色盤 500 階開放任意色碼

給工程師 ​

完整 API 見 Element Plus Select 文件。 本站規範優先於 EP 文件中的視覺建議。