Locale

Change the locale of the datepicker, schedule and client side validation messages.

	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

Resources
- Support
- Forum
- Discord Chat
- Source Code
- PrimeStore
- Blog
- PrimeTV
- Twitter
- Who Uses
- Newsletter
- Gear Store
- About PrimeTek

Theme

Theme

Preset primefaces.THEME

Apple Liquid Glass style: translucent overlays, menus and bars that blur the page behind them, capsule buttons.

Color scheme color-scheme

Input style p-input-filled

Density data-p-density

Direction primefaces.DIR

Colors

Primary --p-primary-base

Custom

Surface --p-surface-*

Shape and motion

Button shape --p-button-border-radius

Shadows --p-*-shadow

Animations --p-transition-duration

Ripple --p-ripple-opacity

Border radius --p-border-radius-*

sm

md

lg

xl

Typography

Font family

Font size

Focus ring

Width

Offset

Form field

Padding x

Padding y

CSS

Only the tokens that differ from the preset.

InputGroup

Text, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside .p-inputgroup element. Multiple addons can be used within the same group as well.

RESOURCES

Documentation Documentation

Addons

$

.00

www

Multiple Addons

$

.00

Button Addons

Checkbox

Usage


<h:form>
    <div class="card">
        <h5>Addons</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <div class="p-inputgroup-addon"><i class="pi pi-user"></i></div>
                    <p:inputText placeholder="Username"/>
                </div>
            </div>
    
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <div class="p-inputgroup-addon">$</div>
                    <p:inputText placeholder="Price"/>
                    <div class="p-inputgroup-addon">.00</div>
                </div>
            </div>
    
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <div class="p-inputgroup-addon">www</div>
                    <p:inputText placeholder="Website"/>
                </div>
            </div>
        </div>
    
        <h5>Multiple Addons</h5>
        <div class="grid p-fluid">
            <div class="col-12">
                <div class="p-inputgroup">
                    <div class="p-inputgroup-addon"><i class="pi pi-tags"/></div>
                    <div class="p-inputgroup-addon"><i class="pi pi-shopping-cart"/></div>
                    <p:inputText placeholder="Price"/>
                    <div class="p-inputgroup-addon">$</div>
                    <div class="p-inputgroup-addon">.00</div>
                </div>
            </div>
        </div>
    
        <h5>Button Addons</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <p:commandButton value="Search"/>
                    <p:inputText placeholder="Keyword"/>
                </div>
            </div>
    
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <p:inputText placeholder="Keyboard"/>
                    <p:commandButton icon="pi pi-search" styleClass="p-button-warning"/>
                </div>
            </div>
    
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <p:commandButton icon="pi pi-check" styleClass="p-button-success"/>
                    <p:inputText placeholder="Vote"/>
                    <p:commandButton icon="pi pi-times" styleClass="p-button-danger"/>
                </div>
            </div>
        </div>
    
        <h5>Checkbox</h5>
        <div class="grid p-fluid">
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <div class="p-inputgroup-addon"><p:selectBooleanCheckbox/></div>
                    <p:inputText placeholder="Username"/>
                </div>
            </div>
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <p:inputText placeholder="Username"/>
                    <div class="p-inputgroup-addon"><p:radioButton for="radioDemo" itemIndex="0"/></div>
                </div>
            </div>
            <div class="col-12 md:col-4">
                <div class="p-inputgroup">
                    <div class="p-inputgroup-addon"><p:selectBooleanCheckbox/></div>
                    <p:inputText placeholder="Username"/>
                    <div class="p-inputgroup-addon"><p:radioButton for="radioDemo" itemIndex="0"/></div>
                </div>
            </div>
        </div>

        <p:selectOneRadio id="radioDemo" layout="custom" unselectable="true">
            <f:selectItem itemValue="demo"/>
        </p:selectOneRadio>
    </div>
</h:form>