OOUI/Widgets/Inputs

OOUI Input widgets, which include text, checkbox, radio, and button inputs, are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs) and can be used with form layouts. They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value.

Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the  config option, which takes the name of the filter function.

 s support a number of methods, including, which can be used to set the direction of the input (  for left-to-right,   for right-to-left, or   which is the default value and inherits the directionality of the parent element) and   and  , which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see the code-level documentation.

Text inputs
 s can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be assigned placeholder text or an initial value. Text inputs can also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.)

Create a text input with the  class:

"WidgetsInputsTextInputs1.png" Add placeholder copy with the  option:

"WidgetsInputsTextInputs4.png" Make the value read-only with the  option:

"WidgetsInputsTextInputs5.png" Change the type of the input with the  config:

"WidgetsInputsTextInputs6.png" For  please see class   further below.

Specify a validation pattern with the  config:

Use,  , and   config options:

s support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see the code-level documentation.

SearchInputWidget
 s are extending TextInputWidgets with  applied.

MultilineTextInputWidget
Create a multiline input with the  class:

"WidgetsInputsTextInputs2.png"

Create an autosized input with the  and   options:



Checkbox inputs
 s, like HTML checkboxes, can be selected and/or configured with a value. Use the  and   methods to set or get the checked state of the box. A checkbox can also be selected via its  configuration option.

A checkbox value, which is useful when the checkbox is part of an HTML  element, can be assigned or gotten with the   and   methods. A value can also be configured with the  configuration option (by default, the value is an empty string).

Note that s are best laid out in  s that use the   alignment, as in the below example.

"WidgetsInputsCheckboxInputs.png" The  and   methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see the code-level documentation.

Horizontal layout
For specific forms, for example when the checkboxes are direct modifiers of an input element, it might be considered to use a  for side-by-side alignment.

Radio inputs
Radio inputs are usually used as a set, and in most cases you will want to use a   with  s instead of the   itself. However, if you have need for a single radio input, the  works much as a   does. The selected state can be set with either the  method or via the widget’s   configuration option.

For more information about s, please see the code-level documentation.

Button inputs
 s, together with s, are used to submit HTML forms. By default, s are rendered as an HTML   and can be configured with options such as icons, indicators, and a value.

If you don’t need the button to work with HTML forms, you probably want to use a  instead.

s can also be rendered as an HTML  using the   configuration. Widgets configured to be an  do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general,  should only be configured as an   when there’s need for IE6 support in a form with multiple buttons.

Create an input button with the ButtonInputWidget class:

"WidgetsInputsButtonInputs.png" For a complete list of supported methods and configuration options, please see the code-level documentation.

Dropdown inputs
 s are dropdown widgets that are intended to be used within an HTML . The selected value is synchronized with the value of a hidden HTML   tag.

"DropdownInputWidget.png" For a complete list of supported methods and configuration options, please see the code-level documentation.