Syncfusion React UI Selection Controls

SyncfusionUI 选择控件JavaScript

适用于现代 React 应用程序的全面选择组件。

  • 支持单选、多选和层级选择场景。
  • 包含下拉框、组合框、自动完成和列表组件。
  • 提供筛选、模板化和交互式状态控制。
Syncfusion logo

起价:

加载中...
包含在以下产品
Syncfusion Essential Studio UI Component Suite加载中
Syncfusion Essential Studio Enterprise加载中
Syncfusion React UI Selection Controls 产品图片
Syncfusion React UI Selection Controls 为 React 应用程序提供了丰富的组件集合，用于管理用户选择，包括可搜索下拉框、基于树的选择器、单选按钮、复选框、切换开关和按钮组。这些组件支持单选和多选、自定义项渲染，以及灵活的数据绑定，适用于动态 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