Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeFaces as it is provided by PrimeFlex.
Core member of the FormLayout is the .p-field class that wraps the input field and the associated label.
<div class="p-field">
<label for="fieldId">Label</label>
<p:inputText id="fieldId" type="text" />
</div>
In its simplest form, a vertical layout is created when used within .ui-fluid that makes the components use all available width.
<div class="ui-fluid">
<div class="p-field">
<label for="firstname">Firstname</label>
<p:inputText id="firstname" type="text" />
</div>
<div class="p-field">
<label for="lastname">Lastname</label>
<p:inputText id="lastname" type="text" />
</div>
</div>
This is where FormLayout actually hooks-in to PrimeFlex with the help of .p-formgrid class to optimize the content for form design. Example below arranges two fields to be displayed next two each other.
<div class="ui-fluid p-formgrid p-grid">
<div class="p-field p-col">
<label for="firstname">Firstname</label>
<p:inputText id="firstname" type="text" />
</div>
<div class="p-field p-col">
<label for="lastname">Lastname</label>
<p:inputText id="lastname" type="text" />
</div>
</div>
In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this example, label has a fixed width where container of the inputs gets the remaining space.
<div class="p-field p-grid">
<label for="firstname" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col">
<p:inputText id="firstname" type="text" />
</div>
</div>
<div class="p-field p-grid">
<label for="lastname" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col">
<p:inputText id="lastname" type="text" />
</div>
</div>
Wrapping the form in the previous example with .ui-fluid and removing the fixed width results in a fluid layout.
<div class="ui-fluid">
<div class="p-field p-grid">
<label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
<div class="p-col-12 p-md-10">
<p:inputText id="firstname" type="text" />
</div>
</div>
<div class="p-field p-grid">
<label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
<div class="p-col-12 p-md-10">
<p:inputText id="lastname" type="text" />
</div>
</div>
</div>
Inline forms are used to display the content on the same row and can simply be implemented by adding .p-formgroup-inline to the form container. Note that per design requirements, if labels are not visually hidden, it is suggested to use .p-sr-only to still support screen readers.
<div class="p-formgroup-inline">
<div class="p-field">
<label for="firstname" class="p-sr-only">Firstname</label>
<p:inputText id="firstname" type="text" placeholder="Firstname" />
</div>
<div class="p-field">
<label for="lastname" class="p-sr-only">Lastname</label>
<p:inputText id="lastname" type="text" placeholder="Lastname" />
</div>
<Button type="button" label="Submit" />
</div>
Checkbox and RadioButton have exclusive layout support via .p-field-checkbox and .p-field-radiobutton classes respectively. Examples here demonstrates vertical and horizontal layout alternatives.
<h3>Vertical Checkbox</h3>
<div class="p-field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
<label for="city2">Los Angeles</label>
</div>
<h3>Horizontal Checkbox</h3>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label>
</div>
<div class="p-field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label>
</div>
</div>
<h3>Vertical RadioButton</h3>
<div class="p-field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label>
</div>
<div class="p-field-radiobutton">
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
<label for="city6">Los Angeles</label>
</div>
<h3>Horizontal RadioButton</h3>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
</div>
<div class="p-field-checkbox">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
</div>
</div>
Helper text is an optional element defined with the small tag to display additional information about the input field.
<div class="p-field ui-fluid">
<label for="username">Username</label>
<p:inputText id="username" type="username" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
</div>
A responsive form with various input fields can easily be implemented using a combination of .p-field, .p-formgrid and .ui-fluid.
<div class="ui-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-6">
<label for="firstname">Firstname</label>
<p:inputText id="firstname" type="text" />
</div>
<div class="p-field p-col-12 p-md-6">
<label for="lastname">Lastname</label>
<p:inputText id="lastname" type="text" />
</div>
<div class="p-field p-col-12">
<label for="address">Address</label>
<Textarea id="address" rows="4" />
</div>
<div class="p-field p-col-12 p-md-6">
<label for="city">City</label>
<p:inputText id="city" type="text" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="state">State</label>
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="zip">Zip</label>
<p:inputText id="zip" type="text" />
</div>
</div>
<div class="card">
<h5>Vertical</h5>
<div class="ui-fluid">
<div class="p-field">
<label for="firstname1">Firstname</label>
<p:inputText id="firstname1" type="text" />
</div>
<div class="p-field">
<label for="lastname1">Lastname</label>
<p:inputText id="lastname1" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Vertical and Grid</h5>
<div class="ui-fluid p-formgrid p-grid">
<div class="p-field p-col">
<label for="firstname2">Firstname</label>
<p:inputText id="firstname2" type="text" />
</div>
<div class="p-field p-col">
<label for="lastname2">Lastname</label>
<p:inputText id="lastname2" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fixed Width</h5>
<div class="p-field p-grid">
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
<div class="p-col">
<p:inputText id="firstname3" type="text" />
</div>
</div>
<div class="p-field p-grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col">
<p:inputText id="lastname3" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fluid</h5>
<div class="ui-fluid">
<div class="p-field p-grid">
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
<div class="p-col-12 p-md-10">
<p:inputText id="firstname4" type="text" />
</div>
</div>
<div class="p-field p-grid">
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
<div class="p-col-12 p-md-10">
<p:inputText id="lastname4" type="text" />
</div>
</div>
</div>
</div>
<div class="card">
<h5>Inline</h5>
<div class="p-formgroup-inline">
<div class="p-field">
<label for="firstname5" class="p-sr-only">Firstname</label>
<p:inputText id="firstname5" type="text" placeholder="Firstname" />
</div>
<div class="p-field">
<label for="lastname5" class="p-sr-only">Lastname</label>
<p:inputText id="lastname5" type="text" placeholder="Lastname" />
</div>
<p:commandButton type="button" value="Submit" />
</div>
</div>
<div class="card">
<p:selectManyCheckbox id="customChkbox1" layout="custom">
<f:selectItem itemLabel="Chicago" itemValue="Chicago"/>
<f:selectItem itemLabel="Los Angeles" itemValue="Los Angeles"/>
</p:selectManyCheckbox>
<p:selectManyCheckbox id="customChkbox2" layout="custom">
<f:selectItem itemLabel="Chicago" itemValue="Chicago"/>
<f:selectItem itemLabel="Los Angeles" itemValue="Los Angeles"/>
</p:selectManyCheckbox>
<h5>Vertical Checkbox</h5>
<div class="p-field-checkbox">
<p:checkbox id="city1" for="customChkbox1" itemIndex="0" />
<label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
<p:checkbox id="city2" for="customChkbox1" itemIndex="1" />
<label for="city2">Los Angeles</label>
</div>
<h5>Horizontal Checkbox</h5>
<div class="p-formgroup-inline">
<div class="p-field-checkbox">
<p:checkbox id="city3" for="customChkbox2" itemIndex="0" />
<label for="city3">Chicago</label>
</div>
<div class="p-field-checkbox">
<p:checkbox id="city4" for="customChkbox2" itemIndex="1" />
<label for="city4">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<p:selectOneRadio id="customRadio1" layout="custom">
<f:selectItem itemLabel="Chicago" itemValue="Chicago"/>
<f:selectItem itemLabel="Los Angeles" itemValue="Los Angeles"/>
</p:selectOneRadio>
<p:selectOneRadio id="customRadio2" layout="custom">
<f:selectItem itemLabel="Chicago" itemValue="Chicago"/>
<f:selectItem itemLabel="Los Angeles" itemValue="Los Angeles"/>
</p:selectOneRadio>
<h5>Vertical RadioButton</h5>
<div class="p-field-radiobutton">
<p:radioButton id="city5" for="customRadio1" itemIndex="0" />
<label for="city5">Chicago</label>
</div>
<div class="p-field-radiobutton">
<p:radioButton id="city6" for="customRadio1" itemIndex="1" />
<label for="city6">Los Angeles</label>
</div>
<h5>Horizontal RadioButton</h5>
<div class="p-formgroup-inline">
<div class="p-field-radiobutton">
<p:radioButton id="city7" for="customRadio2" itemIndex="0" />
<label for="city7">Chicago</label>
</div>
<div class="p-field-radiobutton">
<p:radioButton id="city8" for="customRadio2" itemIndex="0" />
<label for="city8">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Help Text</h5>
<div class="p-field ui-fluid">
<label for="username">Username</label>
<p:inputText id="username" type="username" aria-describedby="username-help" />
<small id="username-help">Enter your username to reset your password.</small>
</div>
</div>
<div class="card">
<h5>Advanced</h5>
<div class="ui-fluid p-formgrid p-grid">
<div class="p-field p-col-12 p-md-6">
<label for="firstname6">Firstname</label>
<p:inputText id="firstname6" type="text" />
</div>
<div class="p-field p-col-12 p-md-6">
<label for="lastname6">Lastname</label>
<p:inputText id="lastname6" type="text" />
</div>
<div class="p-field p-col-12">
<label for="address">Address</label>
<p:inputTextarea id="address" rows="4" />
</div>
<div class="p-field p-col-12 p-md-6">
<label for="city">City</label>
<p:inputText id="city" type="text" />
</div>
<div class="p-field p-col-12 p-md-3">
<label for="state">State</label>
<p:selectOneMenu id="state">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItem itemLabel="Arizona" itemValue="Arizona" />
<f:selectItem itemLabel="California" itemValue="California" />
<f:selectItem itemLabel="Florida" itemValue="Florida" />
<f:selectItem itemLabel="Ohio" itemValue="Ohio" />
<f:selectItem itemLabel="Washington" itemValue="Washington" />
</p:selectOneMenu>
</div>
<div class="p-field p-col-12 p-md-3">
<label for="zip">Zip</label>
<p:inputText id="zip" type="text" />
</div>
</div>
</div>