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; the props shared by every component are covered in Common props.
Widgets
- Button icons, indicators, labels and link forms
- ToggleButton a button that toggles between pressed and unpressed
- ToggleSwitch switch
- ButtonGroup groups several buttons; can be disabled as a whole
- PopupButton a button that opens a popup on click
- Popup the popup layer itself
- Label standalone text label
- Icon icon
- Indicator indicator (an "expand" or "required"-style marker)
- ProgressBar progress bar
- Message inline message notice (with a close button)
Input
- TextInput single-line text input
- MultilineTextInput multi-line text input
- NumberInput number input (with step buttons)
- SearchInput search input (with a clear indicator)
- SearchWidget a search input with a persistent results list
- ComboBoxInput combo box — type to filter or pick from a dropdown
- CheckboxInput a single checkbox
- RadioInput a single radio button
- SelectFileInputWidget 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.
- Select select list (the inner layer of a dropdown or menu)
- Dropdown dropdown select
- OutlineSelect select list with hierarchical indentation
- TabSelect tab-style select
- ButtonSelect button-style select
- ButtonMenuSelectWidget command menu triggered by a button
- CheckboxMultiselect checkbox group
- RadioSelect radio group
- TagMultiselect tag input (free entry)
- MenuTagMultiselect tag input (with a candidate menu)
Form submission
A set of field widgets that submit natively with a <form>, used together with FormLayout.
- ButtonInput submit button
- DropdownInput dropdown select field
- CheckboxMultiselectInput checkbox group field
- RadioSelectInput radio group field
- HiddenInputWidget a field submitted with the form but never shown
Layouts
- Layout layout base class
- PanelLayout panel with padding
- PageLayout overall page layout
- StackLayout stacks panels, showing one at a time
- BookletLayout multiple panels with tabs (booklet-style)
- IndexLayout multiple panels with an index area and search
- TabPanelLayout a single tab panel
- FieldLayout field wrapper with a label and help text
- FieldsetLayout field grouping (can be disabled as a whole)
- ActionFieldLayout a field with an accompanying inline action button
- FormLayout form container
- HorizontalLayout arranges several items horizontally
- MenuLayout overall menu layout
- CopyTextLayout read-only text field with a copy button
Dialogs
- Dialog dialog base class (controlled
open) - MessageDialog message dialog (OK / Cancel)
- ProcessDialog dialog with a multi-step flow and an error panel
confirm/alert/promptimperative dialogs (no React tree needed)
Toolbars
- Toolbar toolbar container
- BarToolGroup button-style tool group
- ListToolGroup list-style tool group
- MenuToolGroup menu-style tool group
- LabelToolGroup static label group within a toolbar