This style guide is deprecated. Please see the revised style guide instead.

Inputs

Basic input

$widget = new OOUI\TextInputWidget( array(

) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.TextInputWidget( [

] );
widget.$element.appendTo( $( 'body' ) );
{{ooui "textinput"}}

Input fields are single-line fields which accept text input. Their width should be determined by the type of content that will be most commonly used with them, or in the case of Stacked style controls, the width of the parent container. Inputs may have labels, placeholder text, or both, aiding the user in knowing what the desired or valid input looks like.

Multi-line input

$widget = new OOUI\TextInputWidget( array(
	'multiline' => 'true'
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.TextInputWidget( {
	"multiline": "true"
} );
widget.$element.appendTo( $( 'body' ) );
{{ooui "textinput" multiline="true"}}

Multi-line inputs share the same properties as Basic Input but accept multiple lines of content input

Surface (Visual Editor)

Surface inputs have the same properties as Multi-line Input but contain styled text. The user may style content, and they may provide interactive elements such as links and rich formatting.

Input indicators

$widget = new OOUI\TextInputWidget( array(
	'indicator' => 'required',
	'placeholder' => 'required field'
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.TextInputWidget( {
	"indicator": "required",
	"placeholder": "required field"
} );
widget.$element.appendTo( $( 'body' ) );
{{ooui "textinput" indicator="required" placeholder="required field"}}

Input fields may have icon labels within them that are purely instructive, such as search or capsule inputs. Other labels act as buttons with icon labels to toggle or invoke modes and helpers such as data pickers, language tools, or formatting controls.

Capsule input

Capsule inputs are a special input fields which recognize valid input, and transform the input into a control within the input field. The capsules may be able to be dragged and dropped within the input field or themselves be comboboxes with additional fields. Use capsule inputs when a field should contain distinct structured data. Capsule input fields may be combined with search input to help users input correct data into a capsule input. Examples are categories, tags, or recipients of a message.

Search input

$widget = new OOUI\TextInputWidget( array(
	'icon' => 'search'
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.TextInputWidget( {
	"icon": "search"
} );
widget.$element.appendTo( $( 'body' ) );
{{ooui "textinput" icon="search"}}

Search input is a special type of input field which allows a user to search a finite list of items, it may include a simple type ahead in-field indicator, or initiate a list view with search result. Search inputs are distinguished from basic inputs with an input indicators.

Formatted & validated input

$widget = new OOUI\TextInputWidget( array(
	'validate' => 'integer',
	'placeholder' => 'Only integers allowed'
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.TextInputWidget( {
	"validate": "integer",
	"placeholder": "Only integers allowed"
} );
widget.$element.appendTo( $( 'body' ) );
{{ooui "textinput" validate="integer" placeholder="Only integers allowed"}}

Formatted input fields structure user input into a pattern which makes it easier to read and understand. Validated input fields look for a particular type, length, or pattern of input from the user. A form’s submission buttons may remain disabled until the user enters valid input. Validated input fields may use guiders to help users achieve this

Validation styles

To cue the user to invalid input, you can colorize Validated input fields or provide guiders. Use color sparingly, and only when there is secondary feedback given to the user about the issue.

  • Awaiting input – Use active or focus state when the field awaits user input
  • Suggestion or possible error – Use Inform or Warning intention to colorize input components. Show contextual labels or Tipsy to explain what needs to be resolved
  • Error – Use destructive Intention if the user cannot proceed without first resolving the issue. Use warning Intention if user input is not ideal. In both cases show labels or Tipsy.

Stepper control (number input)

Stepper controls allow for numeric input as well as up and down buttons which increase or decrease the value in the field by a fixed amount. The length of the input field component should be relative to the desired character length.

Rank Control (WIKIDATA)