OOUI/Layouts/Fields and Fieldsets

One of the most commonly used layouts is the  , which is composed of one or more  s or  s that contain a field widget, such as a form input. In addition to a field widget, s contain a button.

,,   and   can be configured with a label. Both field and action field layouts can also be configured with help text, which is accessed by the user via a help icon in the upper-right corner of the field.

Note that each field and action field layout requires a widget object (e.g., a button or input field), which should be specified by reference before any optional configuration settings. A  should only contain field and action field layouts.  "LayoutsFieldsAndFieldsets.png"

Field labels are aligned in one of four ways:
 * : The label is placed above the form field. A top-alignment is used for brief forms that users fill out from top to bottom.
 * : The label is placed before the form field (or other object) and aligned with the left margin. A left-alignment is used for forms with many fields.
 * : The label is placed before the form field and aligned to the right margin. A right-alignment is used for long but familiar forms which users tab through, verifying the current field with a quick glance at the label.
 * : The label is placed after the form field and aligned to the left. An inline-alignment is best used with checkboxes or radio buttons.

Example of a fieldset layout with an action field layout: "ActionFieldLayout.png"

HorizontalLayout
For specific forms, for example when the checkboxes are direct modifiers of an  element, it can be considered to use a horizontal layout for the side-by-side alignment. Please be aware about the implications for user orientation flow, when the reading direction is changed from vertical to horizontal, therefore it should only be used in specific, option-rich forms. For a full list of supported methods and configuration options, please see the code-level documentation for FieldsetLayouts, FieldLayouts, and ActionFieldLayouts