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
Field layouts
FieldLayout with help
Button
FieldLayout with inlined help
Button
This is some inlined help. Assistive (optional) text, that isn't needed to understand the widget's purpose.
FieldLayout with rich text help
Button
FieldLayout with inlined rich text help
Button
Strong text
is helpful! It should only contain assistive (optional) text.
FieldLayout with title
Button
FieldLayout with rich text label
Button
ActionFieldLayout aligned top
Button
FieldLayout aligned top with help
FieldLayout aligned top with inlined help
This is some inlined help. Assistive (optional) text, that isn't needed to understand the widget's purpose.
ActionFieldLayout aligned top with help
Button
Button
ActionFieldLayout aligned inline
FieldLayout aligned inline with help
FieldLayout aligned inline with ExtraLongLabelSimilarToAnOverlongTitleInMediaWikiToTestOverflowBehavior
Button
ActionFieldLayout aligned inline with help
ActionFieldLayout aligned left
Button
FieldLayout aligned left with help
FieldLayout aligned left with help
This is some inlined help
ActionFieldLayout aligned left with help
Button
ActionFieldLayout aligned left, DropdownInputWidget with help
This is some inlined help
First
Second
Third
Button
ActionFieldLayout aligned right
Button
FieldLayout aligned right with help
FieldLayout aligned right with inlined help
This is some inlined help
ActionFieldLayout aligned right with help
Button
FieldLayout aligned top with a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FieldLayout aligned inline with a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FieldLayout aligned left with a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FieldLayout aligned right with a very long label. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FieldLayout aligned right with a very long label and inline help. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is some inlined help
FieldLayout with notice
Please input a number.
FieldLayout with error message
The value must be a number. It is more than necessary. You can't go on without putting a number into this input field.
FieldLayout with error, warning, success and notice message
The value must be a number.
The value should be a number.
The value is a number. Congratulations!
Please input a number.
Field layouts with no label
When no label is specified, the layouts take up the same width and height despite different "align" values (first four examples below). However, when help text is specified, they behave as if the label was also specified and use the usual different widths and heights (next four examples). The last four examples use a normal label, for comparison.
Button
Button
Button
Button
Button
Button
Button
Button
Label (align: top)
Button
Button
Label (align: inline)
Label (align: left)
Button
Label (align: right)
Button
HorizontalLayout
Inline FieldsetLayout help
Multiple widgets shown as a single line, as used in compact forms or in parts of a bigger widget.
Button
A
B
ButtonInput
DropdownInput
Label
Other layouts
IndexLayout (framed)
Panel 1 (href)
Panel 2
Panel
1
content
Panel
2
content
IndexLayout (frameless,
setTabPanel('panel2')
called)
Panel 1 (href)
Panel 2
Panel
1
content
Panel
2
content
Form layout
User name
Password
Remember me
Submit form
Summary
Log in
Cancel
Random icon button
Help