textArea

LIVE DEMO

An area to enter multiple lines of text.

  • XML element: textArea

  • Java class: JmixTextArea

Basics

Use textArea when the expected input could span multiple lines such as commentary or descriptions.

text area basic 
<textArea label="Comment"
          value="Great job. This is excellent!"/>

Unless set to a fixed height, textArea adjusts its height automatically based on its content. The default and minimum height is two rows of text.

Data Binding

LIVE DEMO

Data binding refers to linking a visual component to a data container. Changes in the visual component or corresponding data container can trigger updates to one another. See Using Data Components for more details.

The following example produces a data-aware textArea:

<textArea id="textArea" label="Order description"
          dataContainer="orderDc"
          property="description"/>

Ensure that the entity attribute you are binding to is of String type. Unlike textField, textArea is specifically designed to work with textual data.

Theme Variants

Use the themeNames attribute to adjust text alignment, helper text placement, and component size.

Alignment

Choose among three alignment options: align-left (default), align-right, align-center.

text area alignment
XML code 
<textArea themeNames="align-left"/>
<textArea themeNames="align-center"/>
<textArea themeNames="align-right"/>

Helper Text Position

Setting helper-above-field will move the helper text from its default position below the field to above it.

text area helper text position
XML code 
<textArea label="Text area label" helperText="Helper text"/>
<textArea themeNames="helper-above-field" label="Text area label" helperText="Helper text"/>

Size

Two size options are available: the default size and small.

text area size
XML code 
<textArea/>
<textArea themeNames="small"/>

Attributes

id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - autoselect - classNames - clearButtonVisible - css - colspan - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - pattern - placeholder - property - readOnly - required - requiredIndicatorVisible - trimEnabled - themeNames - value - valueChangeMode - valueChangeTimeout - visible - width

Handlers

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler - validator

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

Elements

tooltip - prefix - suffix - validator

See Also

See the Vaadin Docs for more information.