> For AI agents: the complete documentation index is available at /ooui-react/en/llms.txt, the full documentation bundle is available at /ooui-react/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](/ooui-react/en/guide/usage.md); the props shared by every component are covered in [Common props](/ooui-react/en/guide/basics.md).

## Widgets


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

### Input


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

### Selection

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


- [Select](/ooui-react/en/components/select/index.md) select list (the inner layer of a dropdown or menu)
- [Dropdown](/ooui-react/en/components/dropdown/index.md) dropdown select
- [OutlineSelect](/ooui-react/en/components/outline-select/index.md) select list with hierarchical indentation
- [TabSelect](/ooui-react/en/components/tab-select/index.md) tab-style select
- [ButtonSelect](/ooui-react/en/components/button-select/index.md) button-style select
- [ButtonMenuSelectWidget](/ooui-react/en/components/button-menu-select/index.md) command menu triggered by a button
- [CheckboxMultiselect](/ooui-react/en/components/checkbox-multiselect/index.md) checkbox group
- [RadioSelect](/ooui-react/en/components/radio-select/index.md) radio group
- [TagMultiselect](/ooui-react/en/components/tag-multiselect/index.md) tag input (free entry)
- [MenuTagMultiselect](/ooui-react/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](/ooui-react/en/components/button-input/index.md) submit button
- [DropdownInput](/ooui-react/en/components/dropdown-input/index.md) dropdown select field
- [CheckboxMultiselectInput](/ooui-react/en/components/checkbox-multiselect-input/index.md) checkbox group field
- [RadioSelectInput](/ooui-react/en/components/radio-select-input/index.md) radio group field
- [HiddenInputWidget](/ooui-react/en/components/hidden-input-widget/index.md) a field submitted with the form but never shown

## Layouts


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

## Dialogs


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

## Toolbars


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