arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
TriStateManyCheckbox
Basic Usage:
Ajax Behavior with custom icons:
Source

<!-- This group is for coding -->
<p:growl id="growl" showDetail="true"/>
<h:panelGrid id="triStateGrid" columns="2" style="margin-bottom:10px" cellpadding="5">

    <h:outputText value="Basic Usage:"/>
    <pe:triStateManyCheckbox id="TriBasic"
                             value="#{triSateManyCheckBoxController.selectedOptionsTriStateBasic}"
                             layout="pageDirection"
                             stateOneTitle="not matter"
                             stateTwoTitle="love it"
                             stateThreeTitle="dislikes">
        <f:selectItems value="#{triSateManyCheckBoxController.basicOptions}"/>
    </pe:triStateManyCheckbox>

    <h:outputText value="Ajax Behavior with custom icons:"/>
    <pe:triStateManyCheckbox id="TriAjax"
                             value="#{triSateManyCheckBoxController.selectedOptionsTriStateAjax}"
                             stateOneIcon="pi pi-home"
                             stateTwoIcon="pi pi-heart"
                             stateThreeIcon="pi pi-star"
                             tabindex="2">
        <f:selectItem itemLabel="Tamara" itemValue="Tamara"/>
        <f:selectItem itemLabel="Mauricio" itemValue="Mauricio"/>
        <p:ajax event="change" update="growl" listener="#{triSateManyCheckBoxController.addMessage}"/>
    </pe:triStateManyCheckbox>
</h:panelGrid>

<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()"/>

<p:dialog header="Selected Values" modal="false" showEffect="fade" hideEffect="fade" widgetVar="dlg" width="400">
    <p:outputPanel id="display">
        <p:dataList value="#{triSateManyCheckBoxController.selectedOptionsTriStateBasic.keySet().toArray()}"
                    var="optionsB">
            #{optionsB} state = #{triSateManyCheckBoxController.selectedOptionsTriStateBasic.get(optionsB)}
        </p:dataList>

        <p:dataList value="#{triSateManyCheckBoxController.selectedOptionsTriStateAjax.keySet().toArray()}"
                    var="optionsA">
            #{optionsA} state = #{triSateManyCheckBoxController.selectedOptionsTriStateAjax.get(optionsA)}
        </p:dataList>
    </p:outputPanel>
</p:dialog>
            
Components and more
Documentation pe:
Attributes (move mouse over the names to see data types)
Name Description
No attributes available for this component.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.13,PrimeFaces Extensions: 15.0.14-SNAPSHOT,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-02-23 00:32