Selects

Dropdown

$widget = new OOUI\DeferredWidget( array (
  'label' => 'Select an item',
  'menu' => 
  array (
    'items' => 
    array (
      0 => 
      array (
        'label' => 'Item 1',
        'type' => 'menuoption',
      ),
      1 => 
      array (
        'label' => 'Item 2',
        'type' => 'menuoption',
      ),
    ),
  ),
  'type' => 'dropdown',
  'class' => 'DropdownWidget',
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.DropdownWidget( {
	"label": "Select an item",
	"menu": {
		"items": [
			new OO.ui.MenuOptionWidget( {
				"label": "Item 1"
			} ),
			new OO.ui.MenuOptionWidget( {
				"label": "Item 2"
			} )
		]

	}

} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "dropdown" label="Select an item"}}
	{{#ooui "menuoption"}}
		Item 1
	{{/ooui}}
	{{#ooui "menuoption"}}
		Item 2
	{{/ooui}}
{{/ooui}}

A dropdown control allows the user to select between a fixed number of element. The default item displayed in a dropdown may be a placeholder or label, or it could be a default value.

Date picker

Date Picker controls are a special type of formatted input which allow for typed or selected temporal selections or ranges.

Combobox

$widget = new OOUI\DeferredWidget( array (
  'menu' => 
  array (
    'items' => 
    array (
      0 => 
      array (
        'label' => 'Item 1',
        'type' => 'menuoption',
      ),
      1 => 
      array (
        'label' => 'Item 2',
        'type' => 'menuoption',
      ),
    ),
  ),
  'type' => 'combobox',
  'class' => 'ComboBoxWidget',
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.ComboBoxWidget( {
	"menu": {
		"items": [
			new OO.ui.MenuOptionWidget( {
				"label": "Item 1"
			} ),
			new OO.ui.MenuOptionWidget( {
				"label": "Item 2"
			} )
		]

	}

} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "combobox"}}
	{{#ooui "menuoption"}}
		Item 1
	{{/ooui}}
	{{#ooui "menuoption"}}
		Item 2
	{{/ooui}}
{{/ooui}}

Combobox input allows the user to type into the field or interact with a dropdown control for selecting pre-filled input. In most cases the freeform input functions as a search or filter control for the valid input that appears in the dropdown.