	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

TriStateManyCheckbox

TriStateManyCheckbox is a group of checkboxes with three states each. The value is a Map of the item values to their states: "0" (unchecked), "1" (checked) and "2" (crossed), or objects with a converter.

TriStateManyCheckbox Tag Documentation

TriStateManyCheckbox is a group of checkboxes with three states each, the value is a Map of the item values to their states.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side widget.
converter	Converter	false		EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage	String	false
disabled	boolean	false	false	Disables the component.
hideNoSelectionOption	boolean	false	false	Flag indicating that, if this component is activated by the user, The "no selection option", if any, must be hidden.
immediate	boolean	false	false	When set true, process validations logic is executed at apply request values phase for this component.
label	String	false		User presentable name, used in the validation messages.
layout	String	false	lineDirection	Layout of the items: lineDirection (in a row) or pageDirection (one per line).
onchange	String	false		Client side callback to execute when the state of an item was changed.
readonly	boolean	false	false	Prevents changes by the user.
required	boolean	false	false	Marks component as required.
requiredMessage	String	false
stateOneIcon	String	false		Icon (style class) of the first state, by default the box is empty.
stateOneTitle	String	false		Title/tooltip of the first state.
stateThreeIcon	String	false		Icon (style class) of the third state, by default the crossed icon of the theme.
stateThreeTitle	String	false		Title/tooltip of the third state.
stateTwoIcon	String	false		Icon (style class) of the second state, by default the checked icon of the theme.
stateTwoTitle	String	false		Title/tooltip of the second state.
style	String	false		Inline style of the component.
styleClass	String	false		Style class of the component.
submittedValue	Object	false
tabindex	String	false		Position of the items in the tabbing order.
validator	Validator	false		A method expression referring to a method validating the input.
validatorMessage	String	false
value	Object	false		Value of the component.
valueChangeListener	ValueChangeListener	false		A method binding expression referring to a method for handling a valuchangeevent.

Name	Description
No records found.

Name	Type	Default	Description
change	AjaxBehaviorEvent	true	Fires when the state of an item was changed.

Name	Library	Target
components.css	primefaces
tristatemanycheckbox/tristatemanycheckbox.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces
tristatemanycheckbox/tristatemanycheckbox.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.TriStateManyCheckbox

Class org.primefaces.component.tristatemanycheckbox.TriStateManyCheckbox

Renderer Type org.primefaces.component.TriStateManyCheckboxRenderer

Renderer Class org.primefaces.component.tristatemanycheckbox.TriStateManyCheckboxRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc

Basic

A click, Space or Enter moves an item to the next state, the arrow keys move forward and back.

Value: {Cheese=1, Onion=2}

Vertical with Titles

Ajax and Custom Icons

The change event fires when the state of an item changes.

Converter

The converter turns the states into objects of the model, here an enum.

Value: {Mushroom=LIKE, Pepperoni=DISLIKE}

Sizes

Disabled and Readonly

Usage


<p:growl showDetail="true">
    <p:autoUpdate/>
</p:growl>

<h:form>
    <div class="card">
        <h5 class="mt-0">Basic</h5>
        <p class="mt-0">A click, Space or Enter moves an item to the next state, the arrow keys move forward and back.</p>
        <p:triStateManyCheckbox id="basic" value="#{triStateManyCheckboxView.basic}">
            <f:selectItems value="#{triStateManyCheckboxView.toppings}"/>
            <p:ajax update="basicValue"/>
        </p:triStateManyCheckbox>
        <p class="mb-0">Value: <h:outputText id="basicValue" value="#{triStateManyCheckboxView.basic}"/></p>
    </div>

    <div class="card">
        <h5 class="mt-0">Vertical with Titles</h5>
        <p:triStateManyCheckbox value="#{triStateManyCheckboxView.vertical}" layout="pageDirection"
                                stateOneTitle="Don't care" stateTwoTitle="Love it" stateThreeTitle="Hate it">
            <f:selectItems value="#{triStateManyCheckboxView.toppings}"/>
        </p:triStateManyCheckbox>
    </div>

    <div class="card">
        <h5 class="mt-0">Ajax and Custom Icons</h5>
        <p class="mt-0">The <i>change</i> event fires when the state of an item changes.</p>
        <p:triStateManyCheckbox value="#{triStateManyCheckboxView.ajax}"
                                stateOneIcon="pi pi-circle" stateTwoIcon="pi pi-heart-fill" stateThreeIcon="pi pi-ban">
            <f:selectItem itemLabel="Cheese" itemValue="Cheese"/>
            <f:selectItem itemLabel="Olives" itemValue="Olives"/>
            <p:ajax event="change" listener="#{triStateManyCheckboxView.onChange}"/>
        </p:triStateManyCheckbox>
    </div>

    <div class="card">
        <h5 class="mt-0">Converter</h5>
        <p class="mt-0">The converter turns the states into objects of the model, here an enum.</p>
        <p:triStateManyCheckbox value="#{triStateManyCheckboxView.converted}"
                                converter="#{triStateManyCheckboxView.preferenceConverter}">
            <f:selectItems value="#{triStateManyCheckboxView.toppings}"/>
            <p:ajax update="convertedValue"/>
        </p:triStateManyCheckbox>
        <p class="mb-0">Value: <h:outputText id="convertedValue" value="#{triStateManyCheckboxView.converted}"/></p>
    </div>

    <div class="card">
        <h5 class="mt-0">Sizes</h5>
        <div class="flex flex-column gap-3">
            <p:triStateManyCheckbox value="#{triStateManyCheckboxView.basic}" styleClass="p-chkbox-sm">
                <f:selectItems value="#{triStateManyCheckboxView.toppings}"/>
            </p:triStateManyCheckbox>
            <p:triStateManyCheckbox value="#{triStateManyCheckboxView.basic}" styleClass="p-chkbox-lg">
                <f:selectItems value="#{triStateManyCheckboxView.toppings}"/>
            </p:triStateManyCheckbox>
        </div>
    </div>

    <div class="card">
        <h5 class="mt-0">Disabled and Readonly</h5>
        <div class="flex flex-column gap-3">
            <p:triStateManyCheckbox value="#{triStateManyCheckboxView.basic}" disabled="true">
                <f:selectItems value="#{triStateManyCheckboxView.toppings}"/>
            </p:triStateManyCheckbox>
            <p:triStateManyCheckbox value="#{triStateManyCheckboxView.basic}" readonly="true">
                <f:selectItems value="#{triStateManyCheckboxView.toppings}"/>
            </p:triStateManyCheckbox>
            <p:triStateManyCheckbox value="#{triStateManyCheckboxView.basic}">
                <f:selectItems value="#{triStateManyCheckboxView.toppings}" var="topping" itemDisabled="#{topping eq 'Cheese'}"/>
            </p:triStateManyCheckbox>
        </div>
    </div>
</h:form>

<h:form>
    <div class="card">
        <h5 class="mt-0">Validation</h5>
        <p class="mt-0">Required: at least one item must not be unchecked.</p>
        <div class="flex flex-wrap align-items-start gap-3">
            <div>
                <p:triStateManyCheckbox id="required" value="#{triStateManyCheckboxView.required}" required="true"
                                        label="Toppings">
                    <f:selectItems value="#{triStateManyCheckboxView.toppings}"/>
                </p:triStateManyCheckbox>
                <p:message for="required"/>
            </div>
            <p:commandButton value="Submit" action="#{triStateManyCheckboxView.submit}" update="@form"/>
        </div>
    </div>
</h:form>


package org.primefaces.showcase.view.input;

import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.component.UIComponent;
import jakarta.faces.context.FacesContext;
import jakarta.faces.convert.Converter;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;

@Named
@ViewScoped
public class TriStateManyCheckboxView implements Serializable {

    public enum Preference {
        NEUTRAL, LIKE, DISLIKE
    }

    private List<String> toppings;
    private Map<String, String> basic;
    private Map<String, String> vertical;
    private Map<String, String> ajax;
    private Map<String, Preference> converted;
    private Map<String, String> required;

    @PostConstruct
    public void init() {
        toppings = List.of("Cheese", "Mushroom", "Olives", "Onion", "Pepperoni");

        basic = new LinkedHashMap<>();
        basic.put("Cheese", "1");
        basic.put("Onion", "2");

        vertical = new LinkedHashMap<>(basic);
        ajax = new LinkedHashMap<>();

        converted = new LinkedHashMap<>();
        converted.put("Mushroom", Preference.LIKE);
        converted.put("Pepperoni", Preference.DISLIKE);

        required = new LinkedHashMap<>();
    }

    public void onChange() {
        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_INFO, "State changed", String.valueOf(ajax)));
    }

    public void submit() {
        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_INFO, "Submitted", String.valueOf(required)));
    }

    /**
     * Converts the states (0, 1, 2) to a {@link Preference} and back.
     */
    public Converter<Preference> getPreferenceConverter() {
        return new Converter<>() {
            @Override
            public Preference getAsObject(FacesContext context, UIComponent component, String value) {
                return Preference.values()[Integer.parseInt(value)];
            }

            @Override
            public String getAsString(FacesContext context, UIComponent component, Preference value) {
                return String.valueOf(value.ordinal());
            }
        };
    }

    public List<String> getToppings() {
        return toppings;
    }

    public Map<String, String> getBasic() {
        return basic;
    }

    public void setBasic(Map<String, String> basic) {
        this.basic = basic;
    }

    public Map<String, String> getVertical() {
        return vertical;
    }

    public void setVertical(Map<String, String> vertical) {
        this.vertical = vertical;
    }

    public Map<String, String> getAjax() {
        return ajax;
    }

    public void setAjax(Map<String, String> ajax) {
        this.ajax = ajax;
    }

    public Map<String, Preference> getConverted() {
        return converted;
    }

    public void setConverted(Map<String, Preference> converted) {
        this.converted = converted;
    }

    public Map<String, String> getRequired() {
        return required;
    }

    public void setRequired(Map<String, String> required) {
        this.required = required;
    }
}

TriStateManyCheckbox