Syncfusion React UI Selection Controls
為現代 React 應用程式提供完整的選取元件。
- 支援單選、多選與階層式選取情境。
- 包含下拉選單、組合方塊、自動完成與清單元件。
- 提供篩選、範本化與互動式狀態控制。
起價:
使用 DropDown List 進行可靠的單一選擇
DropDown List 讓使用者從預先定義的一組選項中選擇一個值。它支援群組、篩選以及自訂項目範本，讓在 React 表單與資料輸入畫面中更容易清楚地呈現結構化資料。
在單一控制項中管理多個選項
MultiSelect DropDown 讓使用者能在緊湊的輸入區域內選取多個項目。內建篩選與彈性的已選值顯示，使其適合標籤、篩選面板與分類選擇等情境。
透過 DropDown Tree 處理巢狀資料
DropDown Tree 以下拉介面呈現階層式資料。使用者可以展開父節點、檢視子項目，並在不同層級選取值。核取方塊支援有助於反映整個階層分支的選取狀態。
使用 AutoComplete 與 ComboBox 進行引導式輸入
AutoComplete 會在使用者輸入時建議符合的項目，而 ComboBox 則結合輸入文字與可選擇的清單。兩者共同支援受控且彈性的資料輸入，降低錯誤並提升 React 應用程式的效率。
在 MultiColumn ComboBox 中比較記錄
MultiColumn ComboBox 會在其下拉選單中為每個項目顯示多個資料欄位。這種版面配置讓使用者在選取前可以比較相關屬性，對於結構化商務資料特別有用。
使用 ListBox 組織項目
ListBox 以清楚的清單格式呈現項目，並支援單選或多選。拖放與重新排序功能讓使用者能直接在介面中管理集合。
使用 Radio Button 與 CheckBox 清楚處理表單輸入
Radio Button 和 CheckBox 元件可在表單中處理互斥與獨立的選擇。它們提供可預期的選取行為，並可自然整合到受控與非受控的 React 元件中。
使用 Toggle Switch 與 Button Group 快速變更狀態
Toggle Switch Button 以即時視覺回饋表示布林值。Button Group 將相關選項排列成可選取的按鈕，讓使用者更容易在可用選項之間切換。
以 Mention 與 Chips 進行具情境感知的選取
Mention 元件會在文字欄位中輸入觸發字元時顯示建議，從而啟用行內參照。Chips 元件則將已選值以緊湊的視覺元素呈現，可依需要新增、選取或移除。
產品相容性
請查看以下詳細資訊，以確保此產品在您的環境中受支援。
元件類型
- JavaScript
JavaScript 平台
- React
關於Syncfusion
Syncfusion 成立於 2001 年，總部位於北卡羅來納州 Morrisville，專注於提供豐富的開發人員元件、控制項與框架，適用於 .NET、JavaScript，以及主要的行動與桌面開發平台。憑藉遍布 125 多個國家的 12,000 多名客戶，它服務的客戶群多元，從個人開發者到 Fortune 500 企業皆涵蓋其中。Essential Studio 等知名產品系列提供超過 1,600 個元件，支援快速應用程式開發、深入的商業智慧，以及穩健的報表解決方案，並搭配即時回應的支援與透明的授權制度。
