arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
QRCode
Play with the options values and generates nice QR Codes.
Render method:
Render mode:
Size:
Fill color:
Source

<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
    
    <h:outputText value="Render method: " />
    <p:selectOneButton value="#{qrCodeController.renderMethod}">  
        <f:selectItem itemLabel="canvas" itemValue="canvas" />  
        <f:selectItem itemLabel="image" itemValue="img" />  
        <f:selectItem itemLabel="div" itemValue="div" />  
    </p:selectOneButton>
    <h:outputText value="Render mode:" />
    <p:selectOneButton value="#{qrCodeController.mode}">  
        <f:selectItem itemLabel="normal" itemValue="0" />  
        <f:selectItem itemLabel="label strip" itemValue="1" />  
        <f:selectItem itemLabel="label box" itemValue="2" />  
        <f:selectItem itemLabel="image strip" itemValue="3" />
        <f:selectItem itemLabel="image box" itemValue="4" />
    </p:selectOneButton>
    <h:outputText value="Size:" />
    <h:panelGrid columns="1">
        <h:inputHidden id="txt2" value="#{qrCodeController.size}" />
        <p:slider minValue="50" maxValue="500" for="txt2"  style="width:200px"/>
    </h:panelGrid>
    <h:outputText value="Fill color:" />
    <p:colorPicker value="#{qrCodeController.fillColor}"/>
    
    <p:commandButton value="update" update="qrCodeElem"/>
    
</h:panelGrid>

<p:divider/>

<pe:qrCode id="qrCodeElem" 
           renderMethod="#{qrCodeController.renderMethod}" 
           renderMode="#{qrCodeController.mode}" 
           text="#{qrCodeController.text}"
           label="#{qrCodeController.label}"
           size="#{qrCodeController.size}"                 
           fillColor="#{qrCodeController.fillColor}"
           fontName="Ubuntu"
           fontColor="#01A9DB"
           ecLevel="H"                   
           radius="0.5"/>
            
Components and more
Use Cases
Documentation pe:qrCode
Attributes (move mouse over the names to see data types)
Name Description
backgroundBackground color.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
converterEL expression resolves to a converter instance or literal converter ID defining a component converter.
ecLevelError correction level.Default is L.
fillColorFill color.
fontColorLabel font color.
fontNameLabel font name.
idUnique identifier of the component in a namingContainer.Default is generated.
labelLabel text.
labelPosXLabel X position.Default is 0.5.
labelPosYLabel Y position.Default is 0.5.
labelSizeLabel font size.Default is 0.1.
leftOffsetLeft offset.Default is 0.
maxVersionMaximum QR version.Default is 40.
minVersionMinimum QR version.Default is 1.
quietQuiet zone size.Default is 0.0.
radiusCorner radius.Default is 0.
renderMethodRendering method.
renderModeRendering mode.Default is 0.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
sizeSize in pixels.Default is 200.
styleInline style of the component.
styleClassStyle class of the component.
textQR content text.
topOffsetTop offset.Default is 0.
valueValue of the component.
widgetVarName of the client side widget.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-03-14 23:18