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

# Component overview

This library reimplements OOUI in React. Components follow the original class hierarchy and fall into four families — **widgets, layouts, dialogs and toolbars** — 60 in total.

Components **ship no styles**: they only output DOM and `oo-ui-*` class names identical to the original. Load the OOUI stylesheets first, as described in [Usage](https://ooui-react.pages.dev/en/guide/usage.md); the props shared by every component are covered in [Common props](https://ooui-react.pages.dev/en/guide/basics.md).

## Widgets


- [Button](https://ooui-react.pages.dev/en/components/button/index.md) icons, indicators, labels and link forms
- [ToggleButton](https://ooui-react.pages.dev/en/components/toggle-button/index.md) a button that toggles between pressed and unpressed
- [ToggleSwitch](https://ooui-react.pages.dev/en/components/toggle-switch/index.md) switch
- [ButtonGroup](https://ooui-react.pages.dev/en/components/button-group/index.md) groups several buttons; can be disabled as a whole
- [PopupButton](https://ooui-react.pages.dev/en/components/popup-button/index.md) a button that opens a popup on click
- [Popup](https://ooui-react.pages.dev/en/components/popup/index.md) the popup layer itself
- [Label](https://ooui-react.pages.dev/en/components/label/index.md) standalone text label
- [Icon](https://ooui-react.pages.dev/en/components/icon/index.md) icon
- [Indicator](https://ooui-react.pages.dev/en/components/indicator/index.md) indicator (an "expand" or "required"-style marker)
- [ProgressBar](https://ooui-react.pages.dev/en/components/progress-bar/index.md) progress bar
- [Message](https://ooui-react.pages.dev/en/components/message/index.md) inline message notice (with a close button)

### Input


- [TextInput](https://ooui-react.pages.dev/en/components/text-input/index.md) single-line text input
- [MultilineTextInput](https://ooui-react.pages.dev/en/components/multiline-text-input/index.md) multi-line text input
- [NumberInput](https://ooui-react.pages.dev/en/components/number-input/index.md) number input (with step buttons)
- [SearchInput](https://ooui-react.pages.dev/en/components/search-input/index.md) search input (with a clear indicator)
- [SearchWidget](https://ooui-react.pages.dev/en/components/search-widget/index.md) a search input with a persistent results list
- [ComboBoxInput](https://ooui-react.pages.dev/en/components/combo-box-input/index.md) combo box — type to filter or pick from a dropdown
- [CheckboxInput](https://ooui-react.pages.dev/en/components/checkbox-input/index.md) a single checkbox
- [RadioInput](https://ooui-react.pages.dev/en/components/radio-input/index.md) a single radio button
- [SelectFileInputWidget](https://ooui-react.pages.dev/en/components/select-file-input-widget/index.md) file picker (including a drop-zone form)

### Selection

For the option data convention (`value`, group headings, and the tag inputs' `label`/`labelText`/`data`), see [Selection and options](https://ooui-react.pages.dev/en/guide/options.md).


- [Select](https://ooui-react.pages.dev/en/components/select/index.md) select list (the inner layer of a dropdown or menu)
- [Dropdown](https://ooui-react.pages.dev/en/components/dropdown/index.md) dropdown select
- [OutlineSelect](https://ooui-react.pages.dev/en/components/outline-select/index.md) select list with hierarchical indentation
- [TabSelect](https://ooui-react.pages.dev/en/components/tab-select/index.md) tab-style select
- [ButtonSelect](https://ooui-react.pages.dev/en/components/button-select/index.md) button-style select
- [ButtonMenuSelectWidget](https://ooui-react.pages.dev/en/components/button-menu-select/index.md) command menu triggered by a button
- [CheckboxMultiselect](https://ooui-react.pages.dev/en/components/checkbox-multiselect/index.md) checkbox group
- [RadioSelect](https://ooui-react.pages.dev/en/components/radio-select/index.md) radio group
- [TagMultiselect](https://ooui-react.pages.dev/en/components/tag-multiselect/index.md) tag input (free entry)
- [MenuTagMultiselect](https://ooui-react.pages.dev/en/components/menu-tag-multiselect/index.md) tag input (with a candidate menu)

### Form submission

A set of field widgets that submit natively with a `<form>`, used together with `FormLayout`.


- [ButtonInput](https://ooui-react.pages.dev/en/components/button-input/index.md) submit button
- [DropdownInput](https://ooui-react.pages.dev/en/components/dropdown-input/index.md) dropdown select field
- [CheckboxMultiselectInput](https://ooui-react.pages.dev/en/components/checkbox-multiselect-input/index.md) checkbox group field
- [RadioSelectInput](https://ooui-react.pages.dev/en/components/radio-select-input/index.md) radio group field
- [HiddenInputWidget](https://ooui-react.pages.dev/en/components/hidden-input-widget/index.md) a field submitted with the form but never shown

## Layouts


- [Layout](https://ooui-react.pages.dev/en/components/layout/index.md) layout base class
- [PanelLayout](https://ooui-react.pages.dev/en/components/panel-layout/index.md) panel with padding
- [PageLayout](https://ooui-react.pages.dev/en/components/page-layout/index.md) overall page layout
- [StackLayout](https://ooui-react.pages.dev/en/components/stack-layout/index.md) stacks panels, showing one at a time
- [BookletLayout](https://ooui-react.pages.dev/en/components/booklet-layout/index.md) multiple panels with tabs (booklet-style)
- [IndexLayout](https://ooui-react.pages.dev/en/components/index-layout/index.md) multiple panels with an index area and search
- [TabPanelLayout](https://ooui-react.pages.dev/en/components/tab-panel-layout/index.md) a single tab panel
- [FieldLayout](https://ooui-react.pages.dev/en/components/field-layout/index.md) field wrapper with a label and help text
- [FieldsetLayout](https://ooui-react.pages.dev/en/components/fieldset-layout/index.md) field grouping (can be disabled as a whole)
- [ActionFieldLayout](https://ooui-react.pages.dev/en/components/action-field-layout/index.md) a field with an accompanying inline action button
- [FormLayout](https://ooui-react.pages.dev/en/components/form-layout/index.md) form container
- [HorizontalLayout](https://ooui-react.pages.dev/en/components/horizontal-layout/index.md) arranges several items horizontally
- [MenuLayout](https://ooui-react.pages.dev/en/components/menu-layout/index.md) overall menu layout
- [CopyTextLayout](https://ooui-react.pages.dev/en/components/copy-text-layout/index.md) read-only text field with a copy button

## Dialogs


- [Dialog](https://ooui-react.pages.dev/en/components/dialog/index.md) dialog base class (controlled `open`)
- [MessageDialog](https://ooui-react.pages.dev/en/components/dialog/index.md) message dialog (OK / Cancel)
- [ProcessDialog](https://ooui-react.pages.dev/en/components/process-dialog/index.md) dialog with a multi-step flow and an error panel
- [`confirm` / `alert` / `prompt`](https://ooui-react.pages.dev/en/components/imperative-dialogs/index.md) imperative dialogs (no React tree needed)

## Toolbars


- [Toolbar](https://ooui-react.pages.dev/en/components/toolbar/index.md) toolbar container
- [BarToolGroup](https://ooui-react.pages.dev/en/components/toolbar/index.md) button-style tool group
- [ListToolGroup](https://ooui-react.pages.dev/en/components/toolbar/index.md) list-style tool group
- [MenuToolGroup](https://ooui-react.pages.dev/en/components/toolbar/index.md) menu-style tool group
- [LabelToolGroup](https://ooui-react.pages.dev/en/components/toolbar/index.md) static label group within a toolbar