OOUI
Demos
– Rapidly create web-applications in JS or PHP. Cross-browser, i18n and a11y ready.
WikimediaUI
Apex
JS
PHP
Desktop
Mobile
Docs
Tutorials
Infuse
Widgets
Layouts
Dialogs
Icons
Toolbars
Buttons
ButtonWidget (normal)
Normal
ButtonWidget (primary, progressive)
Primary progressive
ButtonWidget (primary, destructive)
Primary destructive
ButtonWidget (progressive)
Progressive
ButtonWidget (destructive)
Destructive
Flagged (progressive or destructive) normal ButtonWidgets should only be used in contexts where two equally important primary actions are available.
ButtonWidget (disabled)
Disabled
ButtonWidget (progressive, icon, disabled)
Progressive
ButtonWidget (icon)
Icon
ButtonWidget (icon, progressive)
Icon
ButtonWidget (indicator)
Indicator
ButtonWidget (indicator, progressive)
Indicator
ButtonWidget (
'invisibleLabel' => true
, empty title)
Edit
ButtonWidget (quiet,
'framed' => false, 'invisibleLabel' => true
)
Edit
ButtonWidget (quiet)
Labeled
ButtonWidget (quiet, progressive)
Progressive
ButtonWidget (quiet, destructive)
Destructive
ButtonWidget (quiet, label only, destructive)
Cancel
ButtonWidget (quiet, progressive, with rel="noreferrer noopener" link attribute)
Documentation
ButtonWidget (quiet, progressive, with rel="" link attribute)
Documentation
ButtonWidget (quiet, disabled)
Disabled
ButtonInputWidget (using <input>)
ButtonInputWidget (using <button>)
Another button
ButtonWidget (quiet,
'framed' => false
)
Another button
ButtonWidget (quiet, using
<input>
)
ButtonWidget (with access key)
Access key: G
ButtonInputWidget (with access key and title)
Access key: H
Button sets
ButtonGroupWidget
One
Two
Three
Button style showcase
Button
Button
Button
Tag
Button
Tag
Button
Button
Button
Tag
Button
Tag
Button
Button
Button
Tag
Button
Tag
Button
Button
Button
Tag
Button
Tag
Button
Button
Button
Tag
Button
Tag
TextInput
TextInputWidget
TextInputWidget (icon)
TextInputWidget (required)
TextInputWidget (placeholder)
TextInputWidget (with title)
TextInputWidget (readonly)
TextInputWidget (disabled)
TextInputWidget (minimum length)
TextInputWidget (with access key)
MultilineTextInputWidget
Multiline Multiline
MultilineTextInputWidget (rows=15)
Multiline Multiline
MultilineTextInputWidget (icon, indicator)
Multiline Multiline
SearchInputWidget (type=search)
NumberInputWidget
NumberInputWidget (disabled)
NumberInputWidget (1-5, ints only)
NumberInputWidget (-1–1, step by .1, page by .5)
NumberInputWidget (no buttons)
Checkbox, Radio & ToggleSwitch
CheckboxInputWidget
CheckboxInputWidget (disabled)
CheckboxInputWidget (required)
CheckboxInputWidget (with access key T and title)
CheckboxInputWidget (indeterminate) * requires infusion
CheckboxInputWidget (indeterminate, disabled) * requires infusion
Connected RadioInputWidget #1
Connected RadioInputWidget #2
RadioInputWidget (disabled)
RadioInputWidget (required)
RadioSelectInputWidget
Cat
Dog
Goldfish
CheckboxMultiselectInputWidget
Cat
Dog (disabled)
Goldfish
ToggleSwitchWidget (linked)
ToggleSwitchWidget (disabled)
ToggleSwitchWidget (disabled, checked)
Dropdown
DropdownInputWidget
First
Second
Third
DropdownInputWidget (disabled)
DropdownInputWidget (required)
First
Second
Third
DropdownInputWidget (with optgroup)
A
B
C
DropdownInputWidget (with disabled option and optgroup)
Top-level option
A
B
C
D
DropdownInputWidget (long)
Albanian
Arpitan
Bashkir
Brazilian Portuguese
Central Atlas Tamazight
Chinese
Corsican
Delaware
Emiliano-Romagnolo
English
Finnish
Gheg Albanian
Hebrew
Iloko
Kabardian
Kashubian
Kotava
Lezghian
Low Saxon
Malayalam
Middle Dutch
Moroccan Arabic
Norfuk / Pitkern
Nyanja
Old English
Old Norse
Palauan
Plautdietsch
Russian
Saterland Frisian
Sichuan Yi
Southern Balochi
Tachelhit
Thai
Turkish
Võro
West Flemish
Zeelandic
ComboBox
ComboBoxInputWidget
Label for asd
Label for fgh
Label for jkl
Label for zxc
Label for vbn
ComboBoxInputWidget (disabled)
Label for asd
Label for fgh
Label for jkl
Label for zxc
Label for vbn
ComboBoxInputWidget (empty)
SelectFile
SelectFileInputWidget
SelectFileInputWidget (multiple)
SelectFileInputWidget (custom button)
SelectFileInputWidget (accept PNG and JPEG)
SelectFileInputWidget (icon)
SelectFileInputWidget (disabled)
SelectFileInputWidget (required)
SelectFileInputWidget (buttonOnly)
SelectFileInputWidget (with drop target, accept PNG and JPEG)
SelectFileInputWidget (multiple, with drop target, accept PNG and JPEG)
SelectFileInputWidget (with drop target, disabled)
Tabs
Use
IndexLayout
if you want to use a TabSelectWidget to switch between content.
TabSelectWidget (framed)
Tab 1
Tab 2
TabSelectWidget (frameless)
Tab 1
Tab 2
Progress bar
Progress bar
Progress bar (disabled)
Progress bar (indeterminate)
Progress bar (indeterminate, inline)
Other widgets
IconWidget (normal)
Search
IconWidget (flagged)
Trash
IconWidget (disabled)
Search
IndicatorWidget (normal)
Required
IndicatorWidget (disabled)
Required
LabelWidget (normal)
Label
LabelWidget (disabled)
Label
LabelWidget (with HTML)
Fancy
text
formatting
!
MessageWidget (type => 'notice')
MessageWidget with notice for the user.
Featuring multiple lines of notice.
MessageWidget (type => 'notice', inline)
Inlined MessageWidget with notice for the user.
MessageWidget (type => 'error')
MessageWidget with comprehensive error message for the user.
MessageWidget (type => 'error', inline)
Inline MessageWidget with error message for the user.
MessageWidget (type => 'warning')
MessageWidget with warning message for the user.
MessageWidget (type => 'warning', inline)
Inline MessageWidget with warning message for the user.
MessageWidget (type => 'success')
MessageWidget with engaging success message for the user.
MessageWidget (type => 'success', inline)
Inline MessageWidget with engaging success message for the user.
MessageWidget (type => 'notice', icon => 'article')
MessageWidget (notice) with custom icon.
MessageWidget (type => 'success', icon => 'article')
MessageWidget (success) with custom icon.
MessageWidget (type => 'notice', showClose => true)
MessageWidget with close button.
Test form submission
Test form submission (no validation)