單選按鈕
清晰簡潔地收集單選選項。從簡單的「是/否」問題到具有靈活佈局、自訂選項和智慧功能的複雜多選題,「單選按鈕」欄位可確保使用者從清單中準確選擇一個答案。
非常適合單選題
完美的:
適用於各種用例的強大功能
🎨 靈活的版面選項
三種專業佈局:
- 垂直堆疊式-選項每行顯示一個,垂直堆疊。這是長選項標籤最傳統、最易讀的佈局。
- 水平(內嵌)-選項並排顯示為一行。非常適合簡短的標籤和緊湊的表單。
- 網格(兩列)-選項以兩列網格形式排列。既節省空間,又能保持可讀性。
選擇依據:
- 垂直:長選項標籤、詳細選擇、傳統形式
- 橫向:2-5 個簡短選項(是/否,男/女等)
- 網格:4 種以上中等長度選項,均衡佈局
回應行為:
所有佈局都會自動適應移動螢幕,必要時會垂直堆疊,以獲得更好的觸控互動體驗。
🎲 隨機選項順序
調查等級隨機化
每次表單載入時都隨機打亂選項順序。消除調查、民意測驗和研究表單中的立場偏差。
為什麼要隨機化?
- 防止調查中的順序偏差。
- 確保公平的選擇分配
- 專業研究方法
- 提高數據品質
完美:
- 調查表格和問卷
- A/B 測試和研究
- 投票和表決
- 偏好研究
明智的行為:
即使主要選項隨機化,「其他」和「以上皆非」等特殊選項也可以保留在底部。
❌ “以上皆非”選項
顯式非選擇
在清單末尾新增「以上皆非」或「不適用」選項。這樣用戶就可以清楚表示沒有選項適用。
為什麼要包含這一項?
- 防止強制選擇。
- 提高數據準確性
- 涵蓋所有方面
- 降低表單放棄率
完美:
- 可選的偏好問題
- “選擇所有適用項”式問題
- 資格審查員
- 興趣選擇
智能定位:
「無」選項始終顯示在最後,與常規選項形成明顯的差異。
🔧 輕鬆管理選項
完全掌控選擇:
- 新增選項-輸入並點選「新增選項」或按回車鍵。幾秒鐘即可建立您的清單。
- 編輯選項 – 分別更新顯示文字(使用者看到的內容)和值(提交的內容)。
- 重新排序選項 – 使用上下箭頭鍵以最佳順序排列選項。
- 刪除選項 – 一鍵移除選項。所有選項均非永久性的。
顯示與價值:
- 標籤:使用者看到的內容(例如,「優質服務」)
- 值:儲存在資料庫中的內容(例如,「excellent_service」)
大型建築:
輸入、按 Enter 鍵、再輸入、再按 Enter 鍵,即可快速新增多個選項-快速建立長列表的選項。
✅ 預設選擇
預先選擇一個選項
選擇表單載入時預設選取的單選按鈕。引導使用者選擇常用答案或突出顯示推薦選項。
用例:
預先選擇最常見的答案以加快完成速度
反白建議選項(例如,「最佳性價比」方案)
設定預設協議選項(接受的條款)
引導用戶做出首選
或沒有預設值:
所有選項均保持未選取狀態,要求使用者主動做出選擇。非常適合需要使用者有意識地做出選擇的問題。
✏️ 「其他」選項(附文字輸入)
自訂答案集
新增一個「其他」選項,選取後會顯示一個文字輸入框。如果預設選項都不合適,使用者可以在這裡輸入自己的答案。
可自訂標籤:
- 請根據您的需求更改“其他”標籤文字:
- “其他(請具體說明)”
- “其他東西”
- “自訂答案”
- “未列出”
如何使用:
當使用者選擇「其他」時,會立即出現一個文字框,供其輸入自訂回覆。 「其他」選項及其輸入的文字都會被提交。
用例:
- 您是如何得知我們的? (透過自訂推薦來源)
- 產品偏好(未列出選項)
- 包含「其他問題」的回饋類別
- 任何無法涵蓋所有可能性的清單
🔀 條件邏輯
動態單選按鈕可見性
根據表單其他值顯示或隱藏單選按鈕欄位。建立能夠適應使用者選擇的智慧表單。
高階邏輯規則:
- 與邏輯-所有條件必須滿足
- 邏輯或 – 任何條件都可以觸發該操作
- 8 個運算子-等於、不等於、大於、小於、包含、為空等等
用例:
- 僅當選擇產品類型時才顯示產品選項
- 當配送方式為「快遞」時,顯示配送偏好設置
- 訂單總額低於 100 美元時隱藏分期付款選項
- 根據初始答案提出其他問題
🎯 提升使用者體驗
內建智慧功能:
- 單選強制執行-一次只能選擇一個選項(單選按鈕的標準行為)
- 必要驗證-設定必填選項,並提供清晰的錯誤訊息
- 鍵盤導航 – 方向鍵可在選項之間移動,方便使用者使用。
- 自訂 CSS 類別 – 應用自訂樣式以符合您的品牌
- 輔助使用支援 – 支援 ARIA 標籤,相容於螢幕閱讀器
- 行動裝置優化-觸控友好,點擊目標更大
- 視覺回饋-清晰指示所選選項
- 幫助文字支援 – 新增描述以闡明選項
三步驟輕鬆完成設定
幾分鐘內即可準備好您的單選按鈕字段
新增單選按鈕字段
將「單選按鈕」欄位從「基本欄位」部分拖曳到表單中。
新增您的選項
輸入選項標籤,然後點擊「新增選項」來建立清單。使用箭頭重新排序,並根據需要編輯標籤和值。
選擇佈局和功能
選擇佈局樣式(垂直、水平或網格),可選擇新增“其他”選項或“以上皆非”,並可依需求設定預設選擇。
🎉 好了!您的單選按鈕已準備就緒,可以進行單項選擇了。
實際應用
完整欄位選項
基本配置
- 欄位標籤 – 單選按鈕上方顯示的問題或標題
- 描述/幫助文本 – 為使用者提供的額外指導
- 必填欄位 – 設定為必填
- 佔位符 – 不適用於單選按鈕
版面設計與呈現
- 佈局樣式
- 垂直(堆疊)-每行一個
- 水平(並排)-並排
- 網格(2列)-均衡佈局
單選按鈕選項
- 新增選項 – 建立您的選擇列表
- 顯示文字 – 使用者看到的內容
- 值——表單提交的內容
- 重新排序-上下移動選項
- 刪除 – 移除選項
預設選擇
預設選取值 – 預先選擇一個選項,或留空表示無預設值
特殊選項
- 新增「其他」選項 – 允許自訂文字輸入
- 其他選項標籤 – 自訂「其他」文字(預設值:「其他(請具體說明)」)
- 新增「以上皆非」選項-在末尾新增明確的不選擇選項。
高級功能
隨機排序 – 以隨機順序顯示選項(可用於調查,防止順序偏差)
條件邏輯
- 啟用條件邏輯-根據條件顯示/隱藏
- 邏輯類型
- 所有條件必須滿足(並且)
- 任何條件均可滿足(或)
- 條件規則
- 顯示/隱藏 – 要採取的動作
- 字段 – 要檢查哪個字段
- 運算子 – 等於、不等於、包含、大於、小於、為空、不為空
- 價值 – 比較值
- 多重條件 – 新增無限條規則
其他選項
- 隱藏欄位 – 將欄位設為不可見,但將選定的值包含在提交內容中
- 自訂 CSS 類別 – 應用自訂樣式
- 輔助功能屬性 – ARIA 標籤和描述

為什麼選擇我們的單選按鈕欄位?
✅ 靈活的佈局 垂直、水平或網格狀排列
✅ 調查特徵 – 隨機排序以獲得無偏結果
✅ 用戶友好 – 「其他」選項用於自訂答案
✅ 完全控制 輕鬆新增、編輯、重新排序、刪除選項
✅ 智慧預設設定 – 預先選擇常用或建議選項
✅ 專業 – 對於正規調查,選項應為「以上皆非」。
✅ 移動優化 – 觸控友好,點選目標精準。
✅ 殘疾人 – 鍵盤導航和螢幕閱讀器支援
✅ 一體式電流探棒 – 與所有表單功能無縫協作
常見問題
Q:單選按鈕和複選框有什麼差別?
單選按鈕只能選擇一個選項,複選框可以多選。單選按鈕用於“選擇一個”,複選框用於“選擇任意選項”。
Q:用戶可以更改他們的收音機選擇嗎?
是的。選擇一個新的單選按鈕會自動取消選擇先前的按鈕。
Q:何時應該使用豎版佈局,何時應該使用橫版佈局?
對於較長的清單或較長的標籤,請使用垂直佈局;對於較短的兩到三個選項集,請使用水平佈局;對於中等大小的選項組,請使用網格佈局。
Q:如何選擇「其他」選項?
選擇「其他」將顯示一個文字框,使用者可以在其中輸入自訂答案。選擇項目和文字都會被提交。
Q:隨機排序有什麼作用?
每次表單載入時,選項順序都會改變,以減少回答中的偏差。
Q:我應該設定預設選項嗎?
如果您想加快完成速度或引導用戶,請設定選項。如果您需要用戶自行做出選擇,請留空。
Q:「以上皆非」選項是做什麼用的?
它允許用戶表示沒有列出的選項適用,從而提高準確性並防止強制回答。
Q:我可以設定不同的顯示文字和提交值嗎?
是的。顯示文字會顯示給用戶,提交內容中儲存的值可以更清晰、更有結構。
Q:如何重新排列單選按鈕選項?
使用每個選項旁邊的上下箭頭,將它們移到你喜歡的順序。
Q:單選按鈕是必填嗎?
是的。啟用「必填欄位」後,使用者必須先選擇一個選項才能提交。
Q:單選按鈕在行動裝置上能用嗎?
是的。它們採用觸控式控制,並且在小螢幕上會自動垂直堆疊。
Q:單選按鈕可以使用條件邏輯嗎?
是的。根據使用“等於”或類似條件選擇的選項來顯示或隱藏欄位。