Checkbox 多選框

一組可複選的選項,或單一的「同意/勾選」。使用 Element Plus 的 el-checkbox。

設計準則

• 複選場景用 el-checkbox-group;選項多於 7 個左右改用 multiple select
• 單一 checkbox 用於「同意條款」這類送出才生效的勾選;立即生效的開關用 el-switch
• 「全選」要用 indeterminate 呈現半選狀態,不能只有全勾/全不勾兩態
• 選項文字用肯定句,避免否定句(「不接收通知」勾了到底收不收?)
• 各選項彼此獨立、可同時成立;若互斥就該用 radio
• 尺寸跟著情境走:後台表單用預設,表格內、工具列用 small;同一組、同一畫面不混用

適量使用的變體

以下兩種變體 Element Plus 有提供,Accuhit 產品依使用情境適量使用。預設仍以標準勾選框為主, 同一畫面不要混用多種樣式,避免與產品風格不一:

• 按鈕樣式(el-checkbox-button):外觀和 el-radio-button 相近,使用者不易從外觀分辨單選或多選 → 僅用於工具列的多重篩選(條件可同時成立、需要一眼看出目前選了哪些);一般表單的複選維持標準勾選框
• 帶邊框(border):把整個點選範圍變成一張小卡,適合選項少、需要慎重確認的場景 → 同一組要嘛全部帶框、要嘛全部不帶,不可混用

基本用法

loading

尺寸

在 el-checkbox-group 上設定,整組一起換,不要對單一選項設尺寸:

loading

禁用

單一選項禁用用於「條件未滿足」的選項(功能未啟用、無權限),其他選項照常可選; 要在附近說明原因與解法,不要讓使用者猜為什麼點不動:

loading

可選數量限制

用 min / max 限制勾選數量:達到上限後其餘選項自動禁用、達到下限後已勾的不能再取消。 限制要用文字寫出來(至少/最多幾個、為什麼),不能只靠選項變灰:

loading

全選(半選狀態)

loading

按鈕樣式(多重篩選)

工具列上同時篩選多個條件時使用,選中的項目直接以實心底色呈現,一眼看得出目前篩了哪些。 和 el-radio-button 外觀相近,不要把兩者放在同一列,否則分不出哪個是單選、哪個是多選:

loading

帶邊框

邊框把整個點選範圍變成一張小卡,適合選項少、需要慎重確認的場景。 同一組要嘛全部帶框、要嘛全部不帶;尺寸一樣在 group 上設定:

loading

Do / Don't

✅ Do	❌ Don't
送出才生效的勾選	立即生效的開關(用 el-switch)
「接收行銷通知」	「不接收行銷通知」
全選用 indeterminate	全選只有兩種狀態
選項可同時成立	選項互斥(用 radio)
尺寸在 group 上整組設定	對單一選項設尺寸
數量限制附文字說明	只靠選項變灰讓使用者猜
checkbox-button 用於工具列多重篩選	一般表單的複選也用 checkbox-button
checkbox-button 和 radio-button 分開擺	兩者並排在同一列
同一組全部帶框或全部不帶框	同一組有的帶框、有的沒有

給工程師

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