• Settings
    • 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
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
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-*
Typography
Focus ring
Form field
CSS
Only the tokens that differ from the preset.

                        
                    

TriStateCheckbox

TriStateCheckbox add a new state to a checkbox value.

TriStateCheckbox Tag Documentation

TriStateCheckbox is a checkbox with 3 states: true, false, and unselected.

NameTypeRequiredDefaultDescription
submittedValue Object false
accesskey String false Access key to transfer focus to the input element.
label String false A localized user presentable name.
alt String false Alternate textual description of the input field.
valueChangeListener ValueChangeListener false A method binding expression referring to a method for handling a valuchangeevent.
validator Validator false A method expression referring to a method validating the input.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
autocomplete String false Controls browser autocomplete behavior. Possible values are 'on', 'off', and 'new-password'.
converterMessage String false Custom message to display when conversion fails.
requiredMessage String false Custom message to display when the required validation fails.
validatorMessage String false Custom message to display when validation fails.
maxlength int false Integer.MIN_VALUE Defines the maximum number of characters allowed in the input.
role String false Defines the role of the element for accessibility purposes.
dir String false ltr Direction indication for text that does not inherit directionality.
converter Converter false EL expression resolves to a converter instance or literal converter ID defining a component converter.
onmousedown String false Fires when a mouse button is pressed down on an element.
onmouseup String false Fires when a mouse button is released over an element.
onclick String false Fires when a mouse click on the element.
ondblclick String false Fires when a mouse double-click on the element.
onfocus String false Fires when an element gets focus.
onblur String false Fires when an element loses focus.
onkeydown String false Fires when a user is pressing a key.
onkeypress String false Fires when a user presses a key.
onkeyup String false Fires when a user releases a key.
onmousemove String false Fires when the mouse pointer is moving while it is over an element.
onmouseover String false Fires when the mouse pointer moves onto an element.
onmouseout String false Fires when the mouse pointer moves out of an element.
onchange String false Fires when the value of an element has been changed.
ariaDescribedBy String false Identifies the element(s) that describe the object, enhancing accessibility.
valid boolean false true Indicates whether the input's value is valid.
localValueSet boolean false false Indicates whether the local value of the component has been set.
type String false text Input field type.
itemLabel String false Label for the checkbox item.
required boolean false false Marks component as required.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
size int false Integer.MIN_VALUE Number of characters used to determine the width of the input element.
ondragend String false Script to execute at the end of a drag operation.
ondragstart String false Script to execute at the start of a drag operation.
ondragenter String false Script to execute when a dragged element enters a valid drop target.
ondrop String false Script to execute when a dragged element is dropped.
ondragover String false Script to execute when a dragged element is over a valid drop target.
ondragleave String false Script to execute when a dragged element leaves a valid drop target.
ondrag String false Script to execute when an element is dragged.
onsearch String false Script to execute when a search is performed.
oncopy String false Script to execute when content is copied from the element.
oncut String false Script to execute when content is cut from the element.
onpaste String false Script to execute when content is pasted into the element.
onselect String false Script to execute when text is selected.
oncontextmenu String false Script to execute when the context menu is triggered.
oninvalid String false Script to execute when the element's value is invalid.
onscroll String false Script to execute when the element is scrolled.
oninput String false Script to execute when the element receives user input.
onreset String false Script to execute when the form is reset.
onwheel String false Script to execute when the mouse wheel is used.
style String false Specifies an inline CSS style for an element.
placeholder String false Specifies a short hint describing the expected value of the input.
title String false Specifies extra information about an element (displayed as a tooltip).
styleClass String false Specifies one or more CSS class names for an element.
disabled boolean false false Specifies that an element should be disabled.
readonly boolean false false Specifies that an input field is read-only.
lang String false Specifies the language of the element's content.
tabindex String false Specifies the tab order of an element.
inputmode String false Specifies the type of data expected in the input, aiding virtual keyboards.
stateOneTitle String false Title/tooltip for state one.
stateThreeTitle String false Title/tooltip for state three.
stateTwoTitle String false Title/tooltip for state two.
id String false generated Unique identifier of the component in a namingContainer.
value Object false Value of the component.
immediate boolean false false When set true, process validations logic is executed at apply request values phase for this component.
escape boolean false true Whether to escape HTML in the label.
Loading...
Tag Documentation Documentation Documentation JSDoc
Basic
Remote
Custom Icons and Label
Custom Icons

Usage


<style>
    /* the state icons are tokens: here for one checkbox, in :root for all */
    .custom-icons-tristate {
        --p-checkbox-checked-icon: var(--p-icon-plus);
        --p-checkbox-crossed-icon: var(--p-icon-minus);
    }
</style>

<div class="card">
    <h:form>
        <p:growl id="growl" showDetail="true"/>

        <h5 class="mt-0">Basic</h5>
        <p:triStateCheckbox value="#{triStateCheckboxView.value1}"/>

        <h5>Remote</h5>
        <p:triStateCheckbox id="ajaxTriState" value="#{triStateCheckboxView.value2}">
            <p:ajax event="change" update="growl" listener="#{triStateCheckboxView.addMessage}"/>
        </p:triStateCheckbox>

        <h5>Custom Icons and Label</h5>
        <p:triStateCheckbox value="#{triStateCheckboxView.value3}" styleClass="custom-icons-tristate" itemLabel="Custom Icons"/>
    </h:form>
</div>