> For AI agents: the complete documentation index is available at https://ooui-react.pages.dev/llms.txt, the full documentation bundle is available at https://ooui-react.pages.dev/llms-full.txt.

# 组件总览

本组件库以 React 重新实现 OOUI，组件按原版类层级分为**控件、布局、弹窗、工具栏**几族，合计 60 个。

组件**不自带样式**，只输出与原版一致的 DOM 与 `oo-ui-*` 类名，使用前请先按[使用方式](https://ooui-react.pages.dev/guide/usage.md)引入 OOUI 样式表；所有组件共有的属性规则见[通用属性与 ref](https://ooui-react.pages.dev/guide/basics.md)。

## 控件


- [Button](https://ooui-react.pages.dev/components/button/index.md) 支持图标、指示器、标签与链接形态
- [ToggleButton](https://ooui-react.pages.dev/components/toggle-button/index.md) 可切换的按钮（按下/弹起）
- [ToggleSwitch](https://ooui-react.pages.dev/components/toggle-switch/index.md) 开关
- [ButtonGroup](https://ooui-react.pages.dev/components/button-group/index.md) 把若干按钮排成一组，可统一禁用
- [PopupButton](https://ooui-react.pages.dev/components/popup-button/index.md) 点击弹出浮层的按钮
- [Popup](https://ooui-react.pages.dev/components/popup/index.md) 弹出浮层本身
- [Label](https://ooui-react.pages.dev/components/label/index.md) 独立文本标签
- [Icon](https://ooui-react.pages.dev/components/icon/index.md) 图标
- [Indicator](https://ooui-react.pages.dev/components/indicator/index.md) 指示器（“展开”“必填”一类标记）
- [ProgressBar](https://ooui-react.pages.dev/components/progress-bar/index.md) 进度条
- [Message](https://ooui-react.pages.dev/components/message/index.md) 行内消息提示（含关闭按钮）

### 输入


- [TextInput](https://ooui-react.pages.dev/components/text-input/index.md) 单行文本输入框
- [MultilineTextInput](https://ooui-react.pages.dev/components/multiline-text-input/index.md) 多行文本输入框
- [NumberInput](https://ooui-react.pages.dev/components/number-input/index.md) 数字输入框（带步进按钮）
- [SearchInput](https://ooui-react.pages.dev/components/search-input/index.md) 搜索输入框（带清空指示器）
- [SearchWidget](https://ooui-react.pages.dev/components/search-widget/index.md) 查询输入框加常驻结果列表
- [ComboBoxInput](https://ooui-react.pages.dev/components/combo-box-input/index.md) 可输入过滤也可下拉选择的组合框
- [CheckboxInput](https://ooui-react.pages.dev/components/checkbox-input/index.md) 单个复选框
- [RadioInput](https://ooui-react.pages.dev/components/radio-input/index.md) 单个单选框
- [SelectFileInputWidget](https://ooui-react.pages.dev/components/select-file-input-widget/index.md) 文件选择（含拖放区形态）

### 选择

选项数据的书写约定（`value`、分组标题、标签多选的 `label`/`labelText`/`data`）见[选择与选项](https://ooui-react.pages.dev/guide/options.md)。


- [Select](https://ooui-react.pages.dev/components/select/index.md) 选择列表（下拉/菜单的内层）
- [Dropdown](https://ooui-react.pages.dev/components/dropdown/index.md) 下拉选择
- [OutlineSelect](https://ooui-react.pages.dev/components/outline-select/index.md) 带层级缩进的选择列表
- [TabSelect](https://ooui-react.pages.dev/components/tab-select/index.md) 页签式选择
- [ButtonSelect](https://ooui-react.pages.dev/components/button-select/index.md) 按钮式选择
- [ButtonMenuSelectWidget](https://ooui-react.pages.dev/components/button-menu-select/index.md) 按钮触发的命令菜单
- [CheckboxMultiselect](https://ooui-react.pages.dev/components/checkbox-multiselect/index.md) 复选组
- [RadioSelect](https://ooui-react.pages.dev/components/radio-select/index.md) 单选组
- [TagMultiselect](https://ooui-react.pages.dev/components/tag-multiselect/index.md) 标签输入（自由输入）
- [MenuTagMultiselect](https://ooui-react.pages.dev/components/menu-tag-multiselect/index.md) 标签输入（带候选菜单）

### 表单提交

随 `<form>` 原生提交的一组字段控件，配合 `FormLayout` 使用。


- [ButtonInput](https://ooui-react.pages.dev/components/button-input/index.md) 提交按钮
- [DropdownInput](https://ooui-react.pages.dev/components/dropdown-input/index.md) 下拉选择字段
- [CheckboxMultiselectInput](https://ooui-react.pages.dev/components/checkbox-multiselect-input/index.md) 复选组字段
- [RadioSelectInput](https://ooui-react.pages.dev/components/radio-select-input/index.md) 单选组字段
- [HiddenInputWidget](https://ooui-react.pages.dev/components/hidden-input-widget/index.md) 随表单提交但不显示的字段

## 布局


- [Layout](https://ooui-react.pages.dev/components/layout/index.md) 布局基类
- [PanelLayout](https://ooui-react.pages.dev/components/panel-layout/index.md) 带内边距的面板
- [PageLayout](https://ooui-react.pages.dev/components/page-layout/index.md) 页面整体布局
- [StackLayout](https://ooui-react.pages.dev/components/stack-layout/index.md) 堆叠面板，一次显示一个
- [BookletLayout](https://ooui-react.pages.dev/components/booklet-layout/index.md) 带页签的多面板（手册式）
- [IndexLayout](https://ooui-react.pages.dev/components/index-layout/index.md) 带索引区与搜索的多面板
- [TabPanelLayout](https://ooui-react.pages.dev/components/tab-panel-layout/index.md) 单个页签面板
- [FieldLayout](https://ooui-react.pages.dev/components/field-layout/index.md) 带标签与提示的字段包装
- [FieldsetLayout](https://ooui-react.pages.dev/components/fieldset-layout/index.md) 字段分组（可统一禁用）
- [ActionFieldLayout](https://ooui-react.pages.dev/components/action-field-layout/index.md) 字段加随行按钮
- [FormLayout](https://ooui-react.pages.dev/components/form-layout/index.md) 表单容器
- [HorizontalLayout](https://ooui-react.pages.dev/components/horizontal-layout/index.md) 横向排列若干元素
- [MenuLayout](https://ooui-react.pages.dev/components/menu-layout/index.md) 菜单整体布局
- [CopyTextLayout](https://ooui-react.pages.dev/components/copy-text-layout/index.md) 只读文本框加复制按钮

## 弹窗


- [Dialog](https://ooui-react.pages.dev/components/dialog/index.md) 弹窗基类（受控 open）
- [MessageDialog](https://ooui-react.pages.dev/components/dialog/index.md) 消息弹窗（确定/取消）
- [ProcessDialog](https://ooui-react.pages.dev/components/process-dialog/index.md) 带多步流程与错误面板的弹窗
- [`confirm` / `alert` / `prompt`](https://ooui-react.pages.dev/components/imperative-dialogs/index.md) 命令式弹窗（不依赖 React 树）

## 工具栏


- [Toolbar](https://ooui-react.pages.dev/components/toolbar/index.md) 工具栏容器
- [BarToolGroup](https://ooui-react.pages.dev/components/toolbar/index.md) 按钮式工具组
- [ListToolGroup](https://ooui-react.pages.dev/components/toolbar/index.md) 列表式工具组
- [MenuToolGroup](https://ooui-react.pages.dev/components/toolbar/index.md) 菜单式工具组
- [LabelToolGroup](https://ooui-react.pages.dev/components/toolbar/index.md) 工具栏内的静态标签组