Tobago Demo

Menu

Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta
Root Dummy Intro Search Getting Started Docker What's New Migration Compatibility FAQ API Download Server Info Logging Info In Suggest Textarea Date Range Group 5 Star Rating File Upload Out Label Badge Image Figure Progress Object Checkbox Toggle Dropdown Radio Listbox SelectOneList Multi Checkbox Multi Listbox Shuttle SelectManyList Button and Link Default Command Button Group Customizer Link Group Box Panel Separator Section Header and Footer Bar Popup Popover Toast Basic example Tab Client Tab Ajax Tab Server Basic example Sheet Sorting Paginator Sheet Column Selector Sheet Selectionchange Sheet Event Sheet Action Sheet Markup Sheet Style Empty Sheet Column Bar Sheet Filter Sheet Static Header Sheet Multi Header Sheet Tree Column Panel Sheet Editable Sheet Lazy Sheet Nested Basic example Tree Command Types Tree Select Tree Editor Tree Menu Tree Listbox Intro TinyMCE CKEditor Flow Layout Flex Layout Segment Layout Label Layout Grid Layout Split Layout Message-layout Overview Collapsible Box Collapsible Popup Collapsible Panel Collapsible Section Content Validation JSR 303 Severity Messages Content Security Policy Sanitize Roles Form AccessKey Focus Exception Handler Style Tag Bootstrap Theme Icons Partial Ajax Behavior WebSocket Transition Non Faces Request Conversion Error Handling For Each ConversationScoped Download Configuration Format Locale DataAttribute Meta

Textarea

The <tc:textarea/> tag, creates a textfield with one or more rows. The textarea becomes scrollable if the containing text could not displayed in the current size.

Tag Library Documentation

Basics

The textarea should always have a label attached. For this, use the label attribute.

Unlike the input field In there is no placeholder attribute to describe the meaning of a textarea, when no label is set.

<tc:textarea label="Text Area" value="Some text, some text, ..."/>

Focus

The following textarea should be selected after reloading this page. Use the focus attribute.

<tc:textarea label="Text Area (focus)" focus="true" value="Some Text"/>

Required

A textarea can be set as required with the required attribute. Such a textarea must contain a value, otherwise a submit is not possible. Leave the field blank and press 'submit' to see the errormessage.

<tc:textarea id="treq" label="Text Area" required="true"/>

Markups

The size can be changed with markup large or small.

Autocomplete

The autocomplete attribute can be used for explaining a user the meaning of a field.

The values are documented in MDN.

Ajax

Ajax update by the change event:

Rows

With the rows attribute, the initial size of the textbox can be set. A value less than 1 has no effect.

The following example show a textarea with five rows.

<tc:textarea label="Text Area" rows="5" value="#{textareaController.longText}"/>
© 2005-2025 Apache Software Foundation, Licensed under the Apache License, Version 2.0.