PrimeFaces Showcase

	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

SelectManyButton Tag Documentation

SelectManyButton is a multi select component using button user interface.

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	Flag indicating whether the component should be disabled.
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.
layout	String	false		Layout of the buttons, valid values are custom or default.
onchange	String	false		Client side callback to execute on state change.
required	boolean	false	false	Marks component as required.
requiredMessage	String	false
size	String	false		Defines the size of the button, valid values are "small" and "large".
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 element 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
custom	Custom content of the selectmanybutton.

Name	Type	Default	Description
change	AjaxBehaviorEvent	true	Fires when the value of the button changes.

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

Family org.primefaces.component

Type org.primefaces.component.SelectManyButton

Class org.primefaces.component.selectmanybutton.SelectManyButton

Renderer Type org.primefaces.component.SelectManyButtonRenderer

Renderer Class org.primefaces.component.selectmanybutton.SelectManyButtonRenderer

RESOURCES

Tag DocumentationNew DocumentationNew Documentation JSDoc


<style>
    .custom-button {
        display: inline-block;
        padding: 0.5rem 1rem;
        margin: 0.25rem;
        border: 1px solid var(--p-content-border-color);
        border-radius: 0.25rem;
        background: var(--p-content-background);
        color: var(--p-text-color);
        cursor: pointer;
        transition: all 0.2s;
    }
    .custom-button:hover {
        background: var(--p-content-hover-background);
    }
    .custom-button.ui-state-active {
        background: var(--p-primary-color);
        color: var(--p-primary-contrast-color);
        border-color: var(--p-primary-color);
    }
    .legend {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.25rem;
        vertical-align: sub;
        margin-right: 0.5rem;
    }
    .feature-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 2rem;
        margin: 0.5rem;
        border: 2px solid;
        border-radius: 0.5rem;
        background: var(--p-content-background);
        color: var(--p-text-color);
        cursor: pointer;
        transition: all 0.2s;
        min-width: 200px;
        min-height: 120px;
    }
    .feature-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .feature-button.ui-state-active {
        background: var(--p-content-hover-background);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .feature-button.mobile {
        border-color: #0070ba;
    }
    .feature-button.mobile.ui-state-active {
        border-color: #0070ba;
        background: color-mix(in srgb, #0070ba 14%, var(--p-content-background));
    }
    .feature-button.tablet {
        border-color: #f7931a;
    }
    .feature-button.tablet.ui-state-active {
        border-color: #f7931a;
        background: color-mix(in srgb, #f7931a 14%, var(--p-content-background));
    }
    .feature-button.desktop {
        border-color: #28a745;
    }
    .feature-button.desktop.ui-state-active {
        border-color: #28a745;
        background: color-mix(in srgb, #28a745 14%, var(--p-content-background));
    }
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
    }
    .feature-button.mobile .feature-icon {
        color: #0070ba;
    }
    .feature-button.tablet .feature-icon {
        color: #f7931a;
    }
    .feature-button.desktop .feature-icon {
        color: #28a745;
    }
    .feature-title {
        font-weight: bold;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    .feature-tagline {
        font-size: 0.85rem;
        color: var(--p-text-muted-color);
        text-align: center;
    }
    .feature-button.ui-state-active .feature-tagline {
        color: var(--p-text-color);
    }
</style>

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

        <h5 class="mt-0">Default</h5>
        <p:selectManyButton value="#{selectManyButtonView.selectedOptions}">
            <p:ajax event="change" listener="#{selectManyButtonView.onChange}" />
            <f:selectItem itemLabel="Option 1" itemValue="Option 1"/>
            <f:selectItem itemLabel="Option 2" itemValue="Option 2"/>
            <f:selectItem itemLabel="Option 3" itemValue="Option 3"/>
        </p:selectManyButton>

        <h5>Custom Layout (Facet)</h5>
        <p:selectManyButton id="customButton" value="#{selectManyButtonView.selectedColors}">
            <p:ajax event="change" listener="#{selectManyButtonView.onChange}" />
            <f:selectItem itemLabel="Red" itemValue="Red"/>
            <f:selectItem itemLabel="Green" itemValue="Green"/>
            <f:selectItem itemLabel="Blue" itemValue="Blue"/>

            <f:facet name="custom">
                <div class="custom-button" role="checkbox" tabindex="0">
                    <span class="legend" style="background:red; display:inline-block; width:1rem; height:1rem; border-radius:0.25rem; vertical-align:middle; margin-right:0.5rem;"/> Red
                </div>
                <div class="custom-button" role="checkbox" tabindex="0">
                    <span class="legend" style="background:green; display:inline-block; width:1rem; height:1rem; border-radius:0.25rem; vertical-align:middle; margin-right:0.5rem;"/> Green
                </div>
                <p:badge icon="pi pi-bell" severity="info" iconPos="left">
                <div class="custom-button" role="checkbox" tabindex="0">
                    <span class="legend" style="background:blue; display:inline-block; width:1rem; height:1rem; border-radius:0.25rem; vertical-align:middle; margin-right:0.5rem;"/> Blue
                </div>
                </p:badge>
            </f:facet>
        </p:selectManyButton>

        <h5>Custom Layout (Referenced)</h5>
        <div id="customButton2Container">
            <p:selectManyButton id="customButton2" value="#{selectManyButtonView.selectedDevices}" layout="custom">
                <p:ajax event="change" listener="#{selectManyButtonView.onChange}" />

                <f:selectItem itemLabel="Mobile" itemValue="Mobile"/>
                <f:selectItem itemLabel="Tablet" itemValue="Tablet"/>
                <f:selectItem itemLabel="Desktop" itemValue="Desktop"/>
            </p:selectManyButton>

            <div class="flex flex-wrap justify-content-start mt-3">
                <div class="feature-button mobile" role="checkbox" tabindex="0">
                    <i class="pi pi-mobile feature-icon"></i>
                    <div class="feature-title">Mobile</div>
                    <div class="feature-tagline">Responsive mobile design</div>
                </div>
                <div class="feature-button tablet" role="checkbox" tabindex="0">
                    <i class="pi pi-tablet feature-icon"></i>
                    <div class="feature-title">Tablet</div>
                    <div class="feature-tagline">Tablet optimized view</div>
                </div>
                <div class="feature-button desktop" role="checkbox" tabindex="0">
                    <i class="pi pi-desktop feature-icon"></i>
                    <div class="feature-title">Desktop</div>
                    <div class="feature-tagline">Full desktop experience</div>
                </div>
            </div>
        </div>

        <h5>Sizes</h5>
        <p:selectManyButton id="smallButton" size="small" styleClass="mr-2">
            <f:selectItem itemLabel="Option1" itemValue="Option1"/>
            <f:selectItem itemLabel="Option2" itemValue="Option2"/>
            <f:selectItem itemLabel="Option3" itemValue="Option3"/>
        </p:selectManyButton>
        <p:selectManyButton id="normalButton" styleClass="mr-2">
            <f:selectItem itemLabel="Option1" itemValue="Option1"/>
            <f:selectItem itemLabel="Option2" itemValue="Option2"/>
            <f:selectItem itemLabel="Option3" itemValue="Option3"/>
        </p:selectManyButton>
        <p:selectManyButton id="largeButton" size="large">
            <f:selectItem itemLabel="Option1" itemValue="Option1"/>
            <f:selectItem itemLabel="Option2" itemValue="Option2"/>
            <f:selectItem itemLabel="Option3" itemValue="Option3"/>
        </p:selectManyButton>

    </h:form>
</div>


package org.primefaces.showcase.view.input;

import org.primefaces.component.selectmanybutton.SelectManyButton;

import java.util.List;

import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.event.AjaxBehaviorEvent;
import jakarta.inject.Named;

@Named
@RequestScoped
public class SelectManyButtonView {

    private List<String> selectedOptions;
    private List<String> selectedColors;
    private List<String> selectedDevices;

    public void onChange(AjaxBehaviorEvent event) {
        Object value = ((SelectManyButton) event.getSource()).getValue();
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Selected Devices",
                value != null ? value.toString() : "None selected.");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public List<String> getSelectedOptions() {
        return selectedOptions;
    }

    public void setSelectedOptions(List<String> selectedOptions) {
        this.selectedOptions = selectedOptions;
    }

    public List<String> getSelectedColors() {
        return selectedColors;
    }

    public void setSelectedColors(List<String> selectedColors) {
        this.selectedColors = selectedColors;
    }

    public List<String> getSelectedDevices() {
        return selectedDevices;
    }

    public void setSelectedDevices(List<String> selectedDevices) {
        this.selectedDevices = selectedDevices;
    }
}

SelectManyButton

SelectManyButton Tag Documentation

Default

Custom Layout (Facet)

Custom Layout (Referenced)

Sizes

Usage

Reloading page