Primefaces render kit html5 attributes


When using JSF 2.0 / 2.1 the need for using passthrough elements may occur. However, the passthrough element library is not compatible until JSF 2.2. The following solution uses a custom renderer so that primefaces 5.x can implement HTML5 attributes that you define.

Define your attributes

This first class is use to define which attributes we want to be able to pass through. The static string attributes is the name of these attributes.

The method above called writeAttributes does exactly what means. It writes the attribute(s) pass on the UIComponent to the current facesContext. The attributes that it is checking for are those of which you have defined.

public final class Html5DataAttributes {

    public static void writeAttributes(FacesContext context, UIComponent component) throws IOException {

        ResponseWriter writer = context.getResponseWriter();

        for (String attribute : Html5DataAttributes.attributes) {
            String value = (String) component.getAttributes().get(attribute);
            if (value != null) {
                writer.writeAttribute(attribute, value, null);

    public static String[] attributes = {
        "placeholder", "data-toggle"

You can add as many attributes to the array as needed. Make sure the attributes you do add are not already apart of the primefaces existing component, otherwise the values would be rendered twice.

Create a inputText renderer

To utilize the class above it requires extending the InputTextRenderer class in Primefaces. By default you must override the encodeEnd method. This is where all the magic happens. The method starts by calling the Html5DataAttributes class above. That writes out our custom attributes, it then concludes by calling the classes super. That assures that the existing component attributes in Primefaces will still be rendered.

public class PfInputTextRenderer extends InputTextRenderer {

    public void encodeEnd(FacesContext context, UIComponent component) throws IOException {

        Html5DataAttributes.writeAttributes(context, component);
        super.encodeEnd(context, component);


It should be noted that this is specifically only for the p:inputText component. You can create more renderers as you need them. Ex: CommandButtonRenderer

Register the renderer class

The last step is to tell primefaces where the new render class is located. This is accomplished by places the following in your faces-config.xml.


The render-type is the base class that primefaces uses for rendering the component. The component-family is the location of all similar components. The render-class is the new class we have created to handle inputText rendering.

How do I use it?

It is pretty simple, when calling p:inputText specify your custom attribute

<p:inputText value="#{myBean.value}" placeholder="My custom attribute"/>

What is I have JSF 2.2? 

Then don’t waste your time on what was described above. You can use the built in passthrough library

<html xmlns=""
  <h:form id="form">
    <h:inputText value="#{myBean.value}" pass:placeholder="My placeholder"/>

Read more on javadoc