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

Input Style

Themes

PrimeUIX
Aura Light Emerald Aura Light Emerald
Aura Dark Emerald Aura Dark Emerald
PrimeOne
Saga Blue Saga Blue
Vela Blue Vela Blue
Arya Blue Arya Blue
Bootstrap
Bootstrap Blue Light Bootstrap Blue Light
Bootstrap Purple Light Bootstrap Purple Light
Bootstrap Blue Dark Bootstrap Blue Dark
Bootstrap Purple Dark Bootstrap Purple Dark
Material Design
Material Indigo Light Material Indigo Light
Material Deep Purple Light Material Deep Purple Light
Material Indigo Dark Material Indigo Dark
Material Deep Purple Dark Material Deep Purple Dark
Material Design Compact
Material Compact Indigo Light Material Compact Indigo Light
Material Compact Deep Purple Light Material Compact Deep Purple Light
Material Compact Indigo Dark Material Compact Indigo Dark
Material Compact Deep Purple Dark Material Compact Deep Purple Dark
Legacy
Nova Light Nova Light
Nova Dark Nova Dark
Nova Colored Nova Colored
Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink

SelectCheckboxMenu

SelectCheckboxMenu is used to choose multiple items displayed in an overlay.

SelectCheckboxMenu Tag Documentation

SelectCheckboxMenu is a multi select component that displays options in an overlay.

NameTypeRequiredDefaultDescription
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.
accesskey String false Access key to transfer focus to the input element.
appendTo String false @(body) Appends the overlay to the element defined by search expression.
ariaDescribedBy String false The aria-describedby attribute is used to define a component id that describes the current element for accessibility.
ariaLabelledBy String false
border int false 0
caseSensitive boolean false false Defines if filtering would be case sensitive.
converter Converter false EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage String false
dir String false Direction indication for text that does not inherit directionality.
disabled boolean false false Specifies that an element should be disabled.
disabledClass String false
dynamic boolean false false Defines if dynamic loading is enabled for the element's panel. If the value is "true", the overlay is not rendered on page load to improve performance.
emptyLabel String false Label to be shown in updateLabel mode when no item is selected. If not set the label is shown.
enabledClass String false
filter boolean false false Renders an input field as a filter when enabled.
filterFunction String false Client side function to use in custom filterMatchMode.
filterMatchMode String false Match mode for filtering, valid values are startsWith (default), contains, endsWith and custom.
filterNormalize boolean false false Defines if filtering would be done using normalized values (accents will be removed from characters).
filterPlaceholder String false Placeholder text to show when filter input is empty.
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 A localized user presentable name.
labelSeparator String false , Separator for joining item lables if updateLabel is set to true.
lang String false
layout String false
multiple boolean false false Enables multiple selection mode.
onHide String false Client side callback to execute when overlay is hidden.
onShow String false Client side callback to execute when overlay is displayed.
onblur String false Fires when an element loses focus.
onchange String false Fires when the value of an element has been changed.
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.
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.
onmousedown String false Fires when a mouse button is pressed down on an element.
onmousemove String false Fires when the mouse pointer is moving while it is over an element.
onmouseout String false Fires when the mouse pointer moves out of an element.
onmouseover String false Fires when the mouse pointer moves onto an element.
onmouseup String false Fires when a mouse button is released over an element.
onselect String false
panelStyle String false Inline style of the dropdown panel container element.
panelStyleClass String false Style class of the dropdown panel container element.
readonly boolean false false Specifies that an input field is read-only.
required boolean false false Marks component as required.
requiredMessage String false
role String false
scrollHeight String false 200 Defines the maximum height of the scrollable area.
selectedClass String false
selectedLabel String false Label to be shown in updateLabel mode when one or more items are selected. If not set the label is shown.
showHeader boolean false true When enabled, the header of panel is displayed.
showSelectAll boolean false true When enabled, the "Select All" checkbox option is displayed.
style String false Specifies an inline CSS style for an element.
styleClass String false Specifies one or more CSS class names for an element.
submittedValue Object false
tabindex String false Position of the element in the tabbing order.
title String false Advisory tooltip information.
unselectedClass String false
updateLabel boolean false false When enabled, the label is updated on every change, else it statically displays the 'selectedLabel'.
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.
var String false Name of iterator to be used in custom content display.
Loading...
Tag DocumentationNew DocumentationNew Documentation JSDoc
Basic
Multiple
    Grouped
      Advanced

        Usage

        
        <div class="card">
            <h:form>
                <p:growl>
                    <p:autoUpdate/>
                </p:growl>
        
                <h5 class="mt-0">Basic</h5>
                <p:selectCheckboxMenu id="menu"
                                      dynamic="true"
                                      filter="true" filterMatchMode="startsWith"
                                      label="Cities" updateLabel="true" showSelectAll="false"
                                      selectedLabel="Cities Selected"
                                      style="width: 15rem" panelStyle="width: 15rem" scrollHeight="250"
                                      value="#{checkboxView.selectedCities}">
                    <f:selectItems value="#{checkboxView.cities}"/>
        
                    <f:facet name="footer">
                        <p:divider styleClass="mt-0" />
                        <h:outputText value="#{checkboxView.cities.size()} cities"
                                      styleClass="py-1 block font-bold"/>
                    </f:facet>
                </p:selectCheckboxMenu>
        
                <h5>Multiple</h5>
                <p:selectCheckboxMenu id="multiple"
                                      multiple="true" emptyLabel="Please select..." updateLabel="true"
                                      style="min-width: 15rem" panelStyle="width: 30rem" scrollHeight="250"
                                      value="#{checkboxView.selectedCities2}">
                        <p:ajax event="toggleSelect" listener="#{checkboxView.onToggleSelect}"/>
                        <p:ajax event="itemSelect" listener="#{checkboxView.onItemSelect}"/>
                        <p:ajax event="itemUnselect" listener="#{checkboxView.onItemUnselect}"/>
                        <f:selectItems value="#{checkboxView.cities}"/>
                    </p:selectCheckboxMenu>
        
                <h5>Grouped</h5>
                <p:selectCheckboxMenu id="grouped"
                                      filter="true" filterMatchMode="startsWith"
                                      multiple="true"
                                      style="width: 15rem" panelStyle="width: 15rem" scrollHeight="250"
                                      value="#{checkboxView.selectedCountries}">
                    <f:selectItems value="#{checkboxView.countries}"/>
                </p:selectCheckboxMenu>
        
                <h5>Advanced</h5>
                <p:selectCheckboxMenu id="advanced"
                                      converter="#{countryConverter}"
                                      filter="true" filterMatchMode="startsWith" filterNormalize="true"
                                      multiple="true"
                                      scrollHeight="250"
                                      value="#{checkboxView.selectedCountries2}"
                                      var="c"
                                      style="min-width: 15rem">
                    <f:selectItems value="#{checkboxView.countries2}"/>
        
                    <p:column style="width:10%">
                        <span class="flag flag-#{c.code}" style="width: 30px; height: 20px"/>
                    </p:column>
        
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Name"/>
                        </f:facet>
                        <h:outputText value="#{c.name}"/>
                    </p:column>
        
                    <f:facet name="footer">
                        <h:outputText value="#{checkboxView.countries2.size()} countries"
                                      styleClass="py-1 block font-bold"/>
                    </f:facet>
                </p:selectCheckboxMenu>
            </h:form>
        </div>