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>
<h5>Alignment</h5>
<div class="p-mb-3 p-text-left">Left</div>
<div class="p-mb-3 p-text-center">Center</div>
<div class="p-text-right">Right</div>
<h5>Wrap</h5>
<div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
<div class="p-mb-3 p-text-uppercase">uppercase</div>
<div class="p-text-capitalize">capitalize</div>
<h5>Style</h5>
<div class="p-mb-3 p-text-bold">Bold</div>
<div class="p-mb-3 p-text-normal">Normal</div>
<div class="p-mb-3 p-text-light">Light</div>
<div class="p-mb-3 p-text-italic">Italic</div>