A basic definition for the input text area would be as follows:

<p:inputTextarea value="#{inputTextAreaBean.value}" />

This will render an input text area with the default values rows='3' and cols='20' as shown in the following screenshot:

The component also provides auto-resizing with the autoResize attribute that allows us to expand the height automatically when the text input overflows. The default value is true. If you want to get the vertical scrollbar, you need to set the autoResize to false.

Like the HTML <textarea> component, we can also specify the rows and cols attributes to specify the size of the text area component in rows and columns.

The JavaScript plugin for the inputTextArea component is solely implemented by PrimeFaces with jQuery. Auto-resizing is executed on the keyup, focus, and blur JavaScript events and it increases the number of rows that the component owns. Remaining character count is executed on the keyup event, and the content gets trimmed if maxlength is exceeded. We will get to this trimming feature in the next section.

With the maxlength attribute, we can limit the maximum allowed characters to be input to the component. There are two more attributes, counter and counterTemplate, which will dynamically output the number of characters left to be input to the component easily:

<p:inputTextarea value="#{bean.propertyName}" counter="display"
  maxlength="20" counterTemplate="{0} characters remaining" />
<h:outputText id="display" />

The counter attribute should refer to the ID of the label component to display the remaining characters; counterTemplate will contain the template text to display in counter, with the default value {0}. Either <h:outputText> or <p:outputLabel> can be used as the label component.

<p:inputTextarea value="#{inputTextAreaBean.value}"
  counter="display2" maxlength="20" 
  counterTemplate="{0} characters remaining">
  <f:passThroughAttribute name="onpaste" 
    value="return false;" />
</p:inputTextarea>

<p:inputTextarea completeMethod="#{inputTextAreaBean.complete}"
  queryDelay="500" minQueryLength="4" cols="40" />

public List<String> complete(String query) {
  List<String> results = new ArrayList<String>();

  if(query.equals("PrimeFaces")) {
    results.add("PrimeFaces Rocks!!!");
    results.add("PrimeFaces has 100+ components.");
    results.add("PrimeFaces is lightweight.");
    results.add("PrimeFaces Cookbook
     is the best source for PrimeFaces!");
  }
  else {
    for(int i = 0; i < 10; i++) {
      results.add(query + i);
    }
  }

  return results;
}