# ooui-react

> OOUI 的 React 实现

## Guide

- [Usage](/ooui-react/en/guide/usage.md): Installing ooui-react, its runtime environment, loading the OOUI stylesheets, and using the library on MediaWiki sites or on the Preact compatibility layer.
- [Coming from OOUI](/ooui-react/en/guide/ooui.md): Coming from OOUI (oojs-ui)? How its mental model, classes and APIs map to ooui-react — plus dropped capabilities and behavioral differences at a glance.
- [Common props](/ooui-react/en/guide/basics.md): Prop rules shared by every ooui-react component: undeclared props pass through to the root element, inner elements go through channels like inputProps, and the common semantics of disabled, flags, title, accessKey and tabIndex.
- [Controlled and uncontrolled](/ooui-react/en/guide/controlled.md): ooui-react's value contract: the value, open and checked channels, how control is determined and the callback signatures, and the convention that dialogs are controlled-only.
- [Selection and options](/ooui-react/en/guide/options.md): The option data contract shared by the Select family: value and group headings, children/label text, labelText and data for tag inputs, disabled propagation, icon flags, and the keyboard focus model.
- [Global configuration](/ooui-react/en/guide/configuration.md): Global settings on OOUIProvider: messages and i18n, the popup container, mobile mode, text direction, viewport spacing, access-key labels, and the two channels for imperative dialogs.

## Components

- [Component overview](/ooui-react/en/components/index.md): All components exported by ooui-react, grouped into the widget, layout, dialog and toolbar families with a one-line purpose each; components ship no styles and output DOM identical to OOUI.
- [Button](/ooui-react/en/components/button/index.md): Props for the Button component: label, icon, indicator, flags and framed variants, link usage, and click, keyboard and pressed behavior.
- [ToggleButton](/ooui-react/en/components/toggle-button/index.md): Props for the ToggleButton component: a Button with an on/off state, the checked/defaultChecked/onChange channels, aria-pressed driven by state, and no link capability.
- [ToggleSwitch](/ooui-react/en/components/toggle-switch/index.md): Props for the ToggleSwitch component: a switch (role=switch), the checked/defaultChecked/onChange channels, Space/Enter toggling, and no built-in label — pair it with FieldLayout.
- [ButtonGroup](/ooui-react/en/components/button-group/index.md): Props for the ButtonGroup component: arranging several buttons side by side so they read as one connected block, with a group-level disabled propagated to the buttons inside.
- [Popup](/ooui-react/en/components/popup/index.md): Props for the Popup component: a floating panel anchored to a container with automatic positioning, flipping and clipping; controlled open, auto-close on outside click and Escape, head and footer areas; suited to annotations and tooltips, with PopupButton for button-triggered cases.
- [PopupButton](/ooui-react/en/components/popup-button/index.md): Props for the PopupButton component: a button that toggles a Popup anchored to itself; children is the button label, popupContent the popup body, with built-in outside-click auto-close.
- [Icon](/ooui-react/en/components/icon/index.md): Props for the Icon component and an index of the theme icon set: all available icons grouped as in the original, click to copy an icon name.
- [Indicator](/ooui-react/en/components/indicator/index.md): Props for the Indicator component: the up, down, clear and required indicators, mostly used embedded inside other components.
- [Label](/ooui-react/en/components/label/index.md): Props for the Label component: a standalone form label, htmlFor association with native controls, visual hiding and the disabled state.
- [ProgressBar](/ooui-react/en/components/progress-bar/index.md): Props for the ProgressBar component: a 0–100 progress value, the indeterminate striped form via progress=false, and the role=progressbar semantics with range clamping.
- [Message](/ooui-react/en/components/message/index.md): Props for the Message component: the notice/error/warning/success types, the inline form, the close button and the onClose contract (the component never hides itself — unmount or hide it in the callback).
- [TextInput](/ooui-react/en/components/text-input/index.md): Props for the TextInput component: controlled/uncontrolled, the type whitelist, label and icon/indicator, soft validation, and where props land via the inputProps/inputRef channels.
- [MultilineTextInput](/ooui-react/en/components/multiline-text-input/index.md): Props for the MultilineTextInput component: rows/maxRows, autosize height, scrollbar offset, and the TextInput-family label, icon and soft-validation capabilities.
- [NumberInput](/ooui-react/en/components/number-input/index.md): Props for the NumberInput component: the number | '' value shape, stepping via buttons/keyboard/mouse wheel, min/max/step constraints and soft validation, plus the TextInput-family label and icon capabilities.
- [SearchInput](/ooui-react/en/components/search-input/index.md): Props for the SearchInput component: a single-line search input with a default search icon and a clickable clear indicator when the value is non-empty and editable; otherwise shares TextInput's capabilities.
- [SearchWidget](/ooui-react/en/components/search-widget/index.md): Props for the SearchWidget component: a search box plus a persistent results list; the component doesn't search — query changes fire onQueryChange and you fill results, ↑↓ move the highlight and Enter chooses.
- [ComboBoxInput](/ooui-react/en/components/combo-box-input/index.md): Props for the ComboBoxInput component: a free-text input plus a dropdown candidate menu; choosing writes text but doesn't constrain the value, and input capabilities (label, icon, soft validation) match TextInput, plus the keyboard open/choose semantics.
- [CheckboxInput](/ooui-react/en/components/checkbox-input/index.md): Props for the CheckboxInput component: the checked/defaultChecked/onChange channels, value as the form submission value, the indeterminate half-selected state, and the inputId/inputRef channels.
- [RadioInput](/ooui-react/en/components/radio-input/index.md): Props for the RadioInput component: the checked/defaultChecked/onChange channels, value as the form submission value, native mutual exclusivity within the same name; no indeterminate.
- [SelectFileInputWidget](/ooui-react/en/components/select-file-input-widget/index.md): Props for the SelectFileInputWidget component: the file set rides the value/defaultValue/onChange array channels, with accept type filtering, the showDropTarget drop-zone form (with thumbnail) and the buttonOnly form.
- [Select](/ooui-react/en/components/select/index.md): Props for the Select component: the listbox that powers dropdowns and menus, a selectable option set, the onChange/onChoose division of labor, the clearOnChoose command-menu form, and keyboard navigation switches.
- [Dropdown](/ooui-react/en/components/dropdown/index.md): Props for the Dropdown component: the options list, controlled/uncontrolled selection, placeholder label and icon, and its expand, keyboard navigation and prefix-jump behavior.
- [OutlineSelect](/ooui-react/en/components/outline-select/index.md): Props for the OutlineSelect component: a selection list with hierarchical indentation (the outline form of Select); each option carries a level for indentation, the group is focusable, and arrow keys move the highlight.
- [TabSelect](/ooui-react/en/components/tab-select/index.md): Props for the TabSelect component: a tab-style single selection (role=tablist); ←→ cycle through tabs with direct selection, the selected tab scrolls into view, and framed toggles the framed/frameless bar.
- [ButtonSelect](/ooui-react/en/components/button-select/index.md): Props for the ButtonSelect component: a row of mutually exclusive button options (the selected one shows the button active state), cyclic arrow-key direct selection, the value/defaultValue/onChange channels and icon-bearing options.
- [ButtonMenuSelectWidget](/ooui-react/en/components/button-menu-select/index.md): Props for the ButtonMenuSelectWidget component: a command menu opened from a button (a floating menu below the button); each choice fires onChoose and closes the menu, and clearOnSelect decides whether a selection is kept.
- [CheckboxMultiselect](/ooui-react/en/components/checkbox-multiselect/index.md): Props for the CheckboxMultiselect component: the value/defaultValue/onChange array channels of a checkbox group, Shift+click range selection, arrow-key focus navigation and disabled propagation.
- [RadioSelect](/ooui-react/en/components/radio-select/index.md): Props for the RadioSelect component: a radio group (role=radiogroup) where arrow keys move between options cyclically and select directly, with the value/onChange channels and an options list.
- [TagMultiselect](/ooui-react/en/components/tag-multiselect/index.md): Props for the TagMultiselect component: a chip-style multi-value input with free entry, whitelist and count limits, drag reordering and click-to-edit; use MenuTagMultiselect for a candidate menu.
- [MenuTagMultiselect](/ooui-react/en/components/menu-tag-multiselect/index.md): Props for the MenuTagMultiselect component: a tag input with a candidate menu (TagMultiselect plus required options); typing filters the menu, ↑↓/Enter choose, clicking toggles a tag; without allowArbitrary the legal range is the union of allowedValues and the options' values.
- [ButtonInput](/ooui-react/en/components/button-input/index.md): Props for the ButtonInput component: a real <button>/<input> form button whose type/name/value/formNoValidate take part in native submission, with useInputTag switching to the input form.
- [DropdownInput](/ooui-react/en/components/dropdown-input/index.md): Props for the DropdownInput component: a Dropdown for display with a hidden select carrying native submission, options group headings mapped to optgroup, invalid values falling back to the first selectable.
- [CheckboxMultiselectInput](/ooui-react/en/components/checkbox-multiselect-input/index.md): Props for the CheckboxMultiselectInput component: the form form of CheckboxMultiselect, where each option's checkbox carries name/value for native submission, with the checked set riding the array value channel.
- [RadioSelectInput](/ooui-react/en/components/radio-select-input/index.md): Props for the RadioSelectInput component: a RadioSelect for display with a hidden input carrying native submission, always one selected (invalid values fall back to the first selectable), name only on the hidden input.
- [HiddenInputWidget](/ooui-react/en/components/hidden-input-widget/index.md): Props for the HiddenInputWidget component: a native <input type=hidden> as the root that carries a value submitted with the form but never shown; disabled excludes it from submission.
- [Layout](/ooui-react/en/components/layout/index.md): Props for the Layout component: the layout base class, outputting the oo-ui-layout root class with the unified hidden three-state (true / 'until-found') and aria-hidden handling.
- [PanelLayout](/ooui-react/en/components/panel-layout/index.md): Props for the PanelLayout component: the padded/scrollable/expanded/framed switches, the base container for other layouts and hand-rolled panels.
- [PageLayout](/ooui-react/en/components/page-layout/index.md): Props for the PageLayout component: a single page of the stack layout, its active state and derivation from hidden; usually used indirectly via StackLayout options.
- [MenuLayout](/ooui-react/en/components/menu-layout/index.md): Props for the MenuLayout component: a menu area and a content area, menuPosition four-way placement, showMenu collapse and expanded fill.
- [StackLayout](/ooui-react/en/components/stack-layout/index.md): Props for the StackLayout component: pages rendered from options, the value/defaultValue/onChange channel for the active page, the continuous mode and onPageFocus focus linkage.
- [BookletLayout](/ooui-react/en/components/booklet-layout/index.md): Props for the BookletLayout component: a booklet layout with an outline menu on the left and a page stack on the right, the outlined switch, editable outline controls, continuous scrolling and autoFocus.
- [IndexLayout](/ooui-react/en/components/index-layout/index.md): Props for the IndexLayout component: tabs on top with a panel stack below, openMatchedPanels switching tabs when the browser search matches, continuous display and autoFocus.
- [TabPanelLayout](/ooui-react/en/components/tab-panel-layout/index.md): Props for the TabPanelLayout component: a single tab panel of IndexLayout (role=tabpanel), its active state and swallowed tab fields; usually used indirectly via IndexLayout options.
- [FieldLayout](/ooui-react/en/components/field-layout/index.md): Props for the FieldLayout component: alignment for pairing a label with a field control, the label/control click-and-focus linkage, where title lands, and the styling-only meaning of disabled.
- [FieldsetLayout](/ooui-react/en/components/fieldset-layout/index.md): Props for the FieldsetLayout component: a native fieldset group with a label/icon header, popup or inline help, and group-level disable propagated natively by the fieldset.
- [FormLayout](/ooui-react/en/components/form-layout/index.md): Props for the FormLayout component: a native <form> container wrapping a set of fields, for browser-native submission with name-bearing input controls, incl. method, action, enctype and onSubmit.
- [ActionFieldLayout](/ooui-react/en/components/action-field-layout/index.md): Props for the ActionFieldLayout component: a FieldLayout with an action button beside the field, the fieldInline switch for span-rooted inline controls, align inherited from the field layout.
- [CopyTextLayout](/ooui-react/en/components/copy-text-layout/index.md): Props for the CopyTextLayout component: a read-only field with a copy button that selects all on focus, the copyText source, the multiline form and the onCopyResult callback.
- [HorizontalLayout](/ooui-react/en/components/horizontal-layout/index.md): Props for the HorizontalLayout component: a horizontal container that only outputs the oo-ui-horizontalLayout root class, with arrangement left to the theme CSS.
- [Dialog](/ooui-react/en/components/dialog/index.md): Overview of the dialog family: the declarative MessageDialog and the Dialog base class, the controlled-only open channel, sizes, action areas and background isolation; imperative confirm / alert / prompt live on their own page.
- [Imperative dialogs](/ooui-react/en/components/imperative-dialogs/index.md): The confirm / alert / prompt imperative dialog functions: Promise-based calls that don't depend on the React tree, with return values, options, provider inheritance and runtime semantics.
- [ProcessDialog](/ooui-react/en/components/process-dialog/index.md): Props for the ProcessDialog component: the actions array with safe/primary/other layout, async orchestration via onAction (pending stripes and the error panel), the mode multi-step switch and keyboard shortcuts.
- [Toolbar](/ooui-react/en/components/toolbar/index.md): Props for the Toolbar component: a horizontal bar holding tool groups (Bar/List/Menu), tools declared via a declarative tools array with controlled active state, and automatic narrow-mode compression.