SelectOneMenu is used to choose a single item from a list.
An item with an empty itemLabel has no text for a screen reader to announce. Such an item
is rendered with the localized nullLabel ARIA label ("Not Selected"), both in the options
list and on the closed menu once it is selected. A label that only looks blank, such as a single space,
and a noSelectionOption item are treated the same way. When a placeholder is
set, the placeholder is the visible text and is announced instead. With
hideNoSelectionOption="true" the no-selection item is not rendered at all, so there is
nothing left to announce.
<div class="card">
<h:form>
<div class="p-fluid formgrid grid">
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Basic"/>
<p:selectOneMenu id="option" value="#{selectOneMenuView.selectedOption}">
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItem itemLabel="Option1" itemValue="Option1"/>
<f:selectItem itemLabel="Option2" itemValue="Option2"/>
<f:selectItem itemLabel="Option3" itemValue="Option3"/>
<f:facet name="footer">
<p:divider styleClass="mt-0" />
<h:outputText value="3 options" style="font-weight:bold;"/>
</f:facet>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Grouping"/>
<p:selectOneMenu id="group" value="#{selectOneMenuView.countryGroup}">
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItems value="#{selectOneMenuView.countriesGroup}"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Editable"/>
<p:selectOneMenu id="city" value="#{selectOneMenuView.city}" editable="true">
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItems value="#{selectOneMenuView.cities}"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel value="Label"/>
<p:selectOneMenu id="labeled" value="#{selectOneMenuView.labeled}" label="Always Display Label"
alwaysDisplayLabel="true">
<f:selectItems value="#{selectOneMenuView.cities}"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Advanced"/>
<p:selectOneMenu id="advanced" value="#{selectOneMenuView.country}" converter="#{countryConverter}"
panelStyle="width:180px" panelStyleClass="p-rows-striped" var="c"
filter="true" filterMatchMode="startsWith" filterNormalize="true">
<f:selectItems value="#{selectOneMenuView.countries}" var="country"
itemLabel="#{country.name}" itemValue="#{country}"/>
<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="#{selectOneMenuView.countries.size()} countries"
style="font-weight:bold;" styleClass="py-1 block"/>
</f:facet>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Lazy"/>
<p:selectOneMenu id="lazy" value="#{selectOneMenuView.option}" dynamic="true">
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItems value="#{selectOneMenuView.options}"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Hide NoSelection Option"/>
<p:selectOneMenu id="hideNoselectionOption" value="#{selectOneMenuView.hideNoSelectOption}"
hideNoSelectionOption="#{not empty selectOneMenuView.hideNoSelectOption}">
<p:ajax update="@this" process="@this"/>
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true"/>
<f:selectItem itemLabel="Option1" itemValue="Option1"/>
<f:selectItem itemLabel="Option2" itemValue="Option2"/>
<f:selectItem itemLabel="Option3" itemValue="Option3"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Long Item Label"/>
<p:selectOneMenu id="longItemLabel" value="#{selectOneMenuView.longItemLabel}">
<f:selectItem itemLabel="Zero" itemValue="0"/>
<f:selectItem itemLabel="One" itemValue="1"/>
<f:selectItem itemLabel="Two" itemValue="2"/>
<f:selectItem itemLabel="Three" itemValue="3"/>
<f:selectItem itemLabel="Four" itemValue="4"/>
<f:selectItem itemLabel="Five" itemValue="5"/>
<f:selectItem itemLabel="Six" itemValue="6"/>
<f:selectItem itemLabel="Seven" itemValue="7"/>
<f:selectItem itemLabel="Long item here not necessary in the end" itemValue="99"/>
<f:selectItem itemLabel="Eight" itemValue="8"/>
<f:selectItem itemLabel="Nine" itemValue="9"/>
<f:selectItem itemLabel="Ten and not more than ten " itemValue="10"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="RTL"/>
<p:selectOneMenu id="trl" value="#{selectOneMenuView.rtl}" dir="rtl">
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItem itemLabel="Option1" itemValue="Option1"/>
<f:selectItem itemLabel="Option2" itemValue="Option2"/>
<f:selectItem itemLabel="Option3" itemValue="Option3"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="selectOneMenuIcon" value="Icons" />
<h:panelGroup styleClass="p-inputgroup">
<h:panelGroup id="icon" styleClass="p-inputgroup-addon">
<i class="pi pi-#{selectOneMenuView.icon}"/>
</h:panelGroup>
<p:selectOneMenu id="selectOneMenuIcon" value="#{selectOneMenuView.icon}" var="item">
<f:selectItems value="#{['flag','wallet','map','link']}" var="item" itemLabel="#{item}"
itemValue="#{item}" />
<p:column><i class="pi pi-#{item}" /> #{item} </p:column>
<p:ajax update="@parent:@parent:icon" />
</p:selectOneMenu>
</h:panelGroup>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Disabled"/>
<p:selectOneMenu id="disabled" value="#{selectOneMenuView.selectedOption}" disabled="true">
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItem itemLabel="Option1" itemValue="Option1"/>
<f:selectItem itemLabel="Option2" itemValue="Option2"/>
<f:selectItem itemLabel="Option3" itemValue="Option3"/>
</p:selectOneMenu>
</div>
</div>
</h:form>
</div>
<div class="card">
<h5 class="mt-0">Empty Item Label</h5>
<p>
An item with an empty <code>itemLabel</code> has no text for a screen reader to announce. Such an item
is rendered with the localized <code>nullLabel</code> ARIA label ("Not Selected"), both in the options
list and on the closed menu once it is selected. A label that only looks blank, such as a single space,
and a <code>noSelectionOption</code> item are treated the same way. When a <code>placeholder</code> is
set, the placeholder is the visible text and is announced instead. With
<code>hideNoSelectionOption="true"</code> the no-selection item is not rendered at all, so there is
nothing left to announce.
</p>
<h:form>
<div class="p-fluid formgrid grid">
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Empty Item Label"/>
<p:selectOneMenu id="emptyItem" value="#{selectOneMenuView.emptyItem}">
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="Yes" itemValue="true"/>
<f:selectItem itemLabel="No" itemValue="false"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Blank Item Label"/>
<p:selectOneMenu id="blankItem" value="#{selectOneMenuView.blankItem}">
<f:selectItem itemLabel=" " itemValue=""/>
<f:selectItem itemLabel="Yes" itemValue="true"/>
<f:selectItem itemLabel="No" itemValue="false"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Empty Item Label with Placeholder"/>
<p:selectOneMenu id="emptyItemPlaceholder" value="#{selectOneMenuView.emptyItemWithPlaceholder}"
placeholder="Choose One">
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="Yes" itemValue="true"/>
<f:selectItem itemLabel="No" itemValue="false"/>
</p:selectOneMenu>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="@next" value="Empty NoSelection Option"/>
<p:selectOneMenu id="emptyNoSelectionItem" value="#{selectOneMenuView.emptyNoSelectionItem}">
<f:selectItem itemLabel="" itemValue="#{null}" noSelectionOption="true"/>
<f:selectItem itemLabel="Yes" itemValue="true"/>
<f:selectItem itemLabel="No" itemValue="false"/>
</p:selectOneMenu>
</div>
</div>
</h:form>
</div>