OOUI/Layouts/Fields and Fieldsets/Example 1

CSS

body {
	font-family: sans-serif;
	font-size: 0.875em;
}

.container {
	width: 600px;
	height: 300px;
	border: 1px dotted #c8ccd1;
	padding: 16px;
}

JS

// This is an example of a FieldsetLayout that contains four FieldLayouts 
// (one for each of the labeled form elements). Each field has been configured 
// to illustrate a way in which labels can be aligned: `left`, `right`, `top`, or 
// `inline`.

// Create form elements (text input, checkbox, submit button, etc.).
var input1 = new OO.ui.TextInputWidget( { 
		placeholder: 'A form text field'
	} ),
	input2 = new OO.ui.TextInputWidget( { 
		placeholder: 'A form text field'
	} ),
	input3 = new OO.ui.TextInputWidget( { 
		placeholder: 'A form text field with help'
	} ),
	input4 = new OO.ui.CheckboxInputWidget( {
		selected: true
	} ),
			
// Create a fieldset layout.
	fieldset = new OO.ui.FieldsetLayout( { 
		label: 'FieldsetLayout: Examples of label alignment and help text',
		classes: [ 'container' ]
	} );

// Add field layouts that contain the form elements to the fieldset. Items can 
// also be specified with the FieldsetLayout's `items` config option: 
fieldset.addItems( [
	new OO.ui.FieldLayout( input1, { 
		label: 'Top-aligned label, providing fastest scanability', 
		align: 'top', 
		help: 'A bit of help',
		helpInline: true
	} ),
		
	new OO.ui.FieldLayout( input2, {
		label: 'Left-aligned label, the default', 
		align: 'left' 
	} ),

	new OO.ui.FieldLayout( input3, { 
		label: 'Right-aligned label',
		align: 'right' 
	} ),

	new OO.ui.FieldLayout( input4, { 
		label: 'Inline label', 
		align: 'inline' 
	} )
] );

$( document.body ).append( fieldset.$element );

PHP

// This is an example of a FieldsetLayout that contains four FieldLayouts 
// (one for each of the labeled form elements). Each field has been configured 
// to illustrate a way in which labels can be aligned: `left`, `right`, `top`, or 
// `inline`.

use OOUI\CheckboxInputWidget;
use OOUI\FieldLayout;
use OOUI\FieldsetLayout;
use OOUI\TextInputWidget;

$input1 = new TextInputWidget( [
		'placeholder' => 'A form text field',
] );
$input2 = new TextInputWidget( [ 
		'placeholder' => 'A form text field',
] );
$input3 = new OO.ui.TextInputWidget( { 
		'placeholder' => 'A form text field with help',
] );
$input4 = new OO.ui.CheckboxInputWidget( [
		'selected' => true,
] );

$fieldsetLayout = new FieldsetLayout( [
		'label' => 'FieldsetLayout: Examples of label alignment and help text',
		'classes' => [ 'container' ]
] );

$fieldsetLayout->addItems( [
	new FieldLayout( $input1, [
		'label' => 'Top-aligned label, providing fastest scanability', 
		'align' => 'top', 
		'help' => 'A bit of help',
		'helpInline' => true,
	] ),
		
	new FieldLayout( $input2, [
		'label' => 'Left-aligned label, the default', 
		'align' => 'left',
	] ),

	new FieldLayout( $input3, [
		'label' => 'Right-aligned label',
		'align' => 'right',
	] ),

	new FieldLayout( $input4, [
		'label' => 'Inline label', 
		'align' => 'inline',
	] ),
] );