Last edited 15 hours ago
by Bettina Huber

Form elements and settings

Revision as of 07:42, 2 June 2026 by Bettina Huber (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Form elements[edit | edit source]

It is possible to add the following form fields to your form:

Inputs[edit | edit source]

Field Input type Functionality
Book book auto-complete field that finds pages in the namespace "Book"
Text text standard text field
Textarea textarea multi-line text field
Wikitext input wikitext multi-line text field that expects Wikitext syntax
Category multiselect category_multiselect token field to add one or more categories to the page; values are separated with the enter-key
Checkbox checkbox single checkbox
Menu tag multiselect menutag_multiselect multiple-value input; values are separated with the enter-key
Checkbox multiselect checkbox_multiselect checkbox group (allows selecting multiple values in the group)
Dropdown dropdown dropdown list with predefined options
Number number integer field
Radio button radio single radio button (usually not used in a manually completed form)
Radio group radio_multiselect radio buttons for toggling a selection (allows selecting only one value in the group)
File chooser select_file selects a file in the wiki
Title input title auto-complete field for wiki pages
Combo box combobox combines a text input field and a dropdown list. Users can select a predefined value or type their own.
Password input password sets a password with a password and password-repeat field. This is not used in forms for the target types JSON on wikipage, Template or Email, as the password is stored in plain text.
Tag input tag token field to add multiple values; values are separated with the enter-key
Date date same as Date picker
Title input title selects page titles in the wiki
User input user_picker username that exists in the wiki
Group input group_picker group name that exists in the wiki
Group multiselect group_multiselect multiple group names
User multiselect user_multiselect multiple user names
Title multiseslect title_multiselect multiple page titles
Date picker date_picker calendar widget
Percent percent integer value

Other[edit | edit source]

Element Input type Description
Static Wikitext static_wikitext non-editable text
Button button triggers an action (requires a defined event listener)
Message banner message message that can be shown anywhere in the form;

the type that is set (notice, error, warning, success) provides the visual formatting

Partial form import form_input adds form fields from another form
Icon icon -
Indicator indicator -
Label label -
Progress bar progress_bar visual representation of the number of completed steps in a form such as a checklist
Section label section_label a heading to a form section
HR hr a visual separator line

Input field options[edit | edit source]

Each input field has a combination of any of these options:

main
Type Field Functionality
(all) Name field name stored in the database (avoid special characters)
Label text label shown to users
Help creates a tooltip pop-up next to the label
No layout hides the label
Show on mode in which this field is visible
Editable on sets when the field value can be edited
Book Return property ?
styling
Type Field Functionality
(all) CSS Classes add individual CSS-classes for use on MediaWiki:Common.css

- the class is set on the form field itself and does not include the label; multiple classes can be set together or you can add them separately

Style define an inline style that affects only this field. The style is applied to the wrapper and includes the label and the field
Textarea, Wikitext input Number of rows used for textareas
Placeholder text that is displayed before the user is typing a value (has no effect, if there is also a default value set)
Radio group No default value ensures that there is no pre-selected radio-button if a default would not make sense
Radio group, Checkbox multiselect Horizontal layout aligns multiselect checkboxes or radio groups horizontally
Button Icon displays an icon before the text, (e.g. a bootstrap-icon like bi bi-calendar)
Indicator displays an icon after the text (e.g. a bootstrap-icon like bi bi-arrow-right)
Framed when deactivated, the button looks like text only (and can be styled via CSS classes, e.g. btn button-warning)
other
Type Fieldset Field Functionality
(all) Custom widget properties Key
Value
Listeners Event event that is supported by OO.ui widgets, such as change, enter, focus, blur
Callback function that is called when the event occurs (can be declared in MediaWiki:Common.js for example
Default value /

Selected by default

value that is used if the user does not provide a value; field type "checkbox" has option "Selected by default" instead
Required form cannot be submitted without this field having a value
Password Password strength weak:

medium:
​strong:

Tag Input position inline:

outline:

Allow arbitrary It is possible to add values other than the allowed values (only necessary if allowed values are defined)

Form Settings[edit | edit source]

Appearance[edit | edit source]

Field Functionality
Title display title for the form
Display title shows the form title above each form instance
Display form name displays the name fo the form with label Form used as first form element

Behaviour[edit | edit source]

Field Functionality
Categories adds categories to each form instance; values are separated with the enter-key
Seal after creation form instances cannot be edited after the initial save
Enable intermediate saving form instances show both a Save and a Save & Close button;

the Save button saves the form values and keeps the form in edit-mode.

Infrastructure[edit | edit source]

Field Functionality
Resource loader dependencies
Keep track of revisions
Includable extends form
Abstract
Partial

Target[edit | edit source]

Field Functionality
Target type
Predefined page title for pages created using this form use the field name to insert the value from a form field;

for example: if you have a field with the name company_name, you can use {{company_name}} as page name or part of the page name.

Listeners[edit | edit source]

Field Functionality
Event each listener reacts to one of these events:
  • initCompleteForm: object is initialized
  • parseComplete: JSON/schema/config fully processed
  • renderComplete: UI fully rendered in DOM
  • beforeSubmitData: Right before submission
Callback calls a function when the event occurs;

see the progress bar example.



PDF exclude - start

To submit feedback about this documentation, visit our community forum.

PDF exclude - end