OOUI/Using OOUI in MediaWiki

OOjs UI is included in MediaWiki core, available to be used by both PHP and JavaScript code.

Extensions
A PHP extension can enable OOjs UI on a page using code similar to:

(implemented by class ) ensures that the proper theme and directionality is configured, and that the page loads the OOjs UI styles. The OOjs UI widgets are namespaced, so they must be prefixed with. Stringifying the widgets converts them to HTML, so you can add widgets to the page using.

Parser functions and tags
A parser tag can enable OOjs UI by calling the  method

HTMLForm
You can use the  display format for HTMLForm forms to renders them using OOjs UI. See HTMLForm.

TODO Write more.

Technical notes
TODO Adapt from T98029#1475549

JavaScript
From JavaScript code, you just need to list the  module as a dependency of your modules that use OOjs UI. For example:

See 187079 for some more ideas.

Infusion
TODO Write me.

Gadgets
OOjs UI can be used in on-wiki gadgets or user scripts. As above, you just need to ensure the  module is loaded before your code runs.

For gadgets, you should add an entry in the  field of gadget description. See Gadgets' documentation for instructions and examples.

For user scripts, wrap your code in a  call, as always when loading modules. See ResourceLoader documentation for instructions. Example: If you're using OOUI widgets that aren't in PHP, it's likely that they aren't in -core, which is kept as small as possible. To use those, you need to also depend on. If you're using windows (including message alerts), you should also depend on. If you're using toolbars, you should also depend on.

MediaWiki-specific OOjs UI widgets
Several MediaWiki-specific OOjs UI widgets are available under the  (JavaScript) or   (PHP) namespace, implementing interface elements common in MediaWiki.

TODO Write me.
 * Manual:TitleInputWidget
 * Manual:UserInputWidget
 * Manual:SearchInputWidget
 * Manual:NamespaceInputWidget
 * Manual:DateInputWidget (example: https://gerrit.wikimedia.org/r/#/c/226647/)
 * Manual:DateTimeInputWidget
 * Manual:CategorySelector