Checks, radios and toggles

Checkboxes

$widget = new OOUI\FieldsetLayout( array(
	'items' => array(
		new OOUI\FieldLayout( array(
			'label' => 'My checkbox',
			'align' => 'inline',
			'items' => array(
				new OOUI\CheckboxInputWidget( array(

				) )
			)

		) )
	)

) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.FieldsetLayout( {
	"items": [
		new OO.ui.FieldLayout( {
			"label": "My checkbox",
			"align": "inline",
			"items": [
				new OO.ui.CheckboxInputWidget( [

				] )
			]

		} )
	]

} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "fieldsetlayout"}}
	{{#ooui "fieldlayout" label="My checkbox" align="inline"}}
		{{ooui "checkboxinput"}}
	{{/ooui}}
{{/ooui}}

Checkboxes are a type of toggle control which show an on or off state. Always pair a checkbox with a single or multi-line text label.

Radio groups

$widget = new OOUI\DeferredWidget( array (
  'items' => 
  array (
    0 => 
    array (
      'label' => 'Option one',
      'type' => 'radiooption',
    ),
    1 => 
    array (
      'label' => 'Option two',
      'type' => 'radiooption',
    ),
  ),
  'type' => 'radioselect',
  'class' => 'RadioSelectWidget',
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.RadioSelectWidget( {
	"items": [
		new OO.ui.RadioOptionWidget( {
			"label": "Option one"
		} ),
		new OO.ui.RadioOptionWidget( {
			"label": "Option two"
		} )
	]

} );
widget.$element.appendTo( $( 'body' ) );
{{#ooui "radioselect"}}
	{{#ooui "radiooption"}}
		Option one
	{{/ooui}}
	{{#ooui "radiooption"}}
		Option two
	{{/ooui}}
{{/ooui}}

Radio buttons are a type of toggle control used in groups of two or more, to express a single choice between multiple options.

Toggle Controls

$widget = new OOUI\DeferredWidget( array (
  'type' => 'toggleswitch',
  'class' => 'ToggleSwitchWidget',
) );
$wgOut->addHTML( $widget->toString() );
var widget = new OO.ui.ToggleSwitchWidget( [

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

Toggle controls are similar to checkboxes in that they allow the user to choose between two states, however toggles allow for an additional level of meaning showing users a default value, and a deviation from that, e.g. a control whose default is on, vs a control whose default is off.

Acceptable Modifiers : Intention