PrimeIcons
Ajax Framework
Introduction
Process
PartialSubmit
Selector
Search
Validation
RemoteCommand
Observer
Poll
Fragment
Status
Lifecycle
Dropdown
WebSocket
Form
AutoComplete
CascadeSelect
Chips
ClockPicker
Inplace
InputGroup
InputMask
InputNumber
InputOtp
InputPhone
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
MonacoEditor
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
Button
Data
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Chart
BarNew
BubbleNew
DoughnutNew
LineNew
MixedNew
PieNew
ScatterNew
PolarAreaNew
RadarNew
CustomNew
FacetNew
ExportNew
Messages
Multimedia
File
DragDrop
Client Side Validation
Dialog Framework
Misc
Float Label
All input text components support floating labels by adding ( .ui-float-label ) to wrapper class.
<div class="card" style="width: 100%">
<h:form>
<div class="grid ui-fluid mt-3 floatlabel-demo">
<div class="col-12 md:col-6">
<div class="field">
<span class="ui-float-label">
<p:inputText />
<p:outputLabel for="@previous" value="InputText" />
</span>
</div>
<div class="field">
<span class="ui-float-label ui-input-icon-left">
<i class="pi pi-search" />
<p:inputText />
<p:outputLabel for="@previous" value="Left Icon" styleClass="ml-4" />
</span>
</div>
<div class="field">
<span class="ui-float-label ui-input-icon-right">
<p:inputText />
<p:outputLabel for="@previous" value="Right Icon" />
<i class="pi pi-spin pi-spinner" />
</span>
</div>
<div class="field">
<span class="ui-float-label">
<p:inputMask mask="99/99/9999" />
<p:outputLabel for="@previous" value="InputMask" />
</span>
</div>
<div class="field">
<span class="ui-float-label">
<p:inputNumber />
<p:outputLabel for="@previous" value="InputNumber" />
</span>
</div>
<div class="field">
<span class="ui-float-label">
<p:chips />
<p:outputLabel for="@previous" value="Chips" />
</span>
</div>
<div class="field">
<span class="ui-float-label">
<p:colorPicker clearButton="true" closeButton="true"/>
<p:outputLabel for="@previous" value="Color" />
</span>
</div>
</div>
<div class="col-12 md:col-6">
<div class="field">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"> <i class="pi pi-user" />
</span> <span class="ui-float-label" style="width: 100%"> <p:inputText /> <p:outputLabel
for="@previous" value="InputGroup" />
</span>
</div>
</div>
<div class="field">
<span class="ui-float-label">
<p:autoComplete />
<p:outputLabel for="@previous" value="AutoComplete" />
</span>
</div>
<div class="field">
<span class="ui-float-label">
<p:datePicker />
<p:outputLabel for="@previous" value="Datepicker" />
</span>
</div>
<div class="field">
<span class="ui-float-label">
<p:selectOneMenu id="cities" autoWidth="false">
<f:selectItem itemLabel="" itemValue="" />
<f:selectItem itemLabel="New York" itemValue="New York" />
<f:selectItem itemLabel="Rome" itemValue="Rome" />
<f:selectItem itemLabel="London" itemValue="London" />
<f:selectItem itemLabel="Istanbul" itemValue="Istanbul" />
<f:selectItem itemLabel="Paris" itemValue="Paris" />
</p:selectOneMenu>
<p:outputLabel for="@previous" value="Dropdown" />
</span>
</div>
<div class="field">
<span class="ui-float-label">
<p:inputTextarea rows="3" cols="30" />
<p:outputLabel for="@previous" value="Textarea" />
</span>
</div>
</div>
</div>
</h:form>
</div>
PrimeFaces: 14.0.8 by
PrimeTek