Radio 單選框

一組互斥選項中選一個,且所有選項需要一眼可見。使用 Element Plus 的 el-radio。

設計準則

• 選項 2–5 個時用 radio;更多選項改用 el-select 收合
• 一定要有預設選中項,radio 不適合「全部未選」的狀態
• 選項文字簡短(2–6 字),語意互斥、不重疊
• 「分段切換」場景(切換檢視、時間範圍)用 el-radio-button,外觀更像一組開關
• 選項以橫排為主;文字較長或每項附說明時改直排
• 尺寸跟著情境走:後台表單用預設,表格內、工具列用 small;同一組、同一畫面不混用

基本用法

loading

尺寸

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

loading

帶邊框

邊框把整個點選範圍變成一張小卡,適合選項少、需要慎重選擇的場景(方案選擇、計費模式)。 同一組要嘛全部帶框、要嘛全部不帶,不可混用;尺寸一樣在 group 上設定:

loading

按鈕樣式(分段切換)

工具列上切換時間範圍、檢視模式時使用:

loading

按鈕樣式的尺寸

跟著工具列上其他元件的尺寸走,表格上方的工具列用 small:

loading

Do / Don't

✅ Do	❌ Don't
2–5 個互斥選項	10 個選項排成一排(改用 select)
預設選中其中一項	全部未選
el-radio-button 做分段切換	用一排 primary 按鈕自刻
選項語意互斥	選項之間可以同時成立(改用 checkbox)
尺寸、邊框在 group 上整組設定	同一組有的帶框有的沒有、大小不一

給工程師

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