textArea

textArea is an input field for entering multiple lines of text.

XML Element

textArea

Java Class

JmixTextArea

Basics

LIVE DEMO

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

<textArea id="textArea" value="Great job. This is excellent!" label="Comment"
          valueChangeMode="EAGER" maxLength="140" helperText="29/140"/>
<textArea id="textArea2" value="Everything you do works great!" label="Additional comment"/>

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-aware textArea

LIVE DEMO

Use the dataContainer and property attributes to bind textArea to a String entity attribute. The data container provides the entity instance, and property identifies the attribute to edit.

The following example produces a data-aware textArea:

XML
<data>
    <instance id="orderDc"
              class="io.jmix.uisamples.entity.Order"
              fetchPlan="_local"/>
</data>
<layout>
    <textArea id="textArea" label="Order description"
              dataContainer="orderDc" property="description"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>
Java
@ViewComponent
protected InstanceContainer<Order> orderDc;
@ViewComponent
protected Span spanValue;

@Autowired
protected Metadata metadata;

@Subscribe
protected void onInit(InitEvent event) {
    Order order = metadata.create(Order.class);
    order.setDescription("Deliver as quickly as possible.");
    orderDc.setItem(order);
}

@Subscribe("textArea")
protected void onTextAreaValueChange(ComponentValueChangeEvent<JmixTextArea, String> changeEvent) {
    spanValue.setText(orderDc.getItem().getDescription());
}

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

Resizable Text Area

LIVE DEMO

Apply a resize class to let users resize a text area horizontally, vertically, or in both directions. The CSS sets the corresponding resize value and enables overflow handling.

XML
<textArea id="textArea" label="Standard TextArea"/>
<textArea id="resizableBothTextArea" label="Resizeable TextArea"
          classNames="resizable-both"
          themeNames="helper-above-field"
          helperText="Both direction"/>
<textArea id="resizableVerticalTextArea" label="Resizeable TextArea"
          classNames="resizable-vertical"
          themeNames="helper-above-field"
          helperText="Vertical direction"/>
<textArea id="resizableHorizontalTextArea" label="Resizeable TextArea"
          classNames="resizable-horizontal"
          themeNames="helper-above-field"
          helperText="Horizontal direction"/>
CSS
.resizable-both {
    resize: both;
    overflow: auto;
    padding-bottom: unset;
}

.resizable-vertical {
    resize: vertical;
    overflow: auto;
    padding-bottom: unset;
}

.resizable-horizontal {
    resize: horizontal;
    overflow: auto;
    padding-bottom: unset;
}

Theme Variants

LIVE DEMO

Use the themeNames attribute to apply one or more theme variants.

Variant Description Supported By

small

Makes the component smaller.

Aura, Lumo

align-left

Aligns the field value to the left side.

Aura, Lumo

align-center

Centers the field value.

Aura, Lumo

align-right

Aligns the field value to the right side.

Aura, Lumo

helper-above-field

Renders the helper text above the field, below the label.

Aura, Lumo

Attributes

The following attributes are specific to textArea:

Name Description Default

id

Sets the component identifier.

—

enabled

Controls whether the user can interact with the component.

true

helperText

Sets helper text displayed near the component.

—

label

Sets the component label.

—

placeholder

Sets placeholder text shown when the field is empty.

—

readOnly

Controls whether the value can be changed by the user.

false

value

Sets the component value.

—

visible

Controls whether the component is displayed.

true

dataContainer

Specifies the data container that provides the bound entity.

—

property

Specifies the entity attribute bound to the component.

—

height

Sets the component height.

—

maxHeight

Sets the maximum component height.

—

maxWidth

Sets the maximum component width.

—

minHeight

Sets the minimum component height.

—

minWidth

Sets the minimum component width.

—

width

Sets the component width.

—

alignSelf

Overrides the component’s alignment inside its parent layout.

AUTO

colspan

Sets the number of columns occupied in a form layout.

1

classNames

Adds CSS class names to the component.

—

clearButtonVisible

Controls whether the field displays a clear button.

false

css

Defines inline CSS properties.

—

maxRows

Sets the maximum number of rows.

—

minRows

Sets the minimum number of rows.

2

errorMessage

Sets the message displayed when the component is invalid.

—

maxLength

Sets the maximum accepted input length.

—

minLength

Sets the minimum accepted input length.

—

pattern

Sets the regular expression used to validate input.

—

required

Controls whether the component requires a value.

false

allowedCharPattern

Restricts input to characters that match the specified regular expression.

—

ariaLabel

Defines an accessible label when no suitable visible label exists.

—

ariaLabelledBy

Identifies another component that provides the accessible label.

—

autocapitalize

Controls automatic capitalization for user input.

—

autocomplete

Controls browser autocomplete for the field.

—

autocorrect

Controls automatic correction for user input.

—

autofocus

Moves keyboard focus to the component when the view opens.

false

autoselect

Set to true to always have the field value automatically selected when the field gains focus, false otherwise.

—

focusShortcut

Defines a keyboard shortcut that focuses the component.

—

tabIndex

Controls the component’s position in the keyboard focus order.

0

trimEnabled

If true, the component trims spaces at the beginning and at the end of the input. For example: " aaa bbb " will be saved as "aaa bbb". Configure this setting application-wide using the jmix.ui.component.default-trim-enabled property.

—

The following shared attributes are supported by textArea:

themeNames

Handlers

The following handlers are specific to textArea:

Name Description

AttachEvent

Fired when the component is attached to the UI.

BlurEvent

Fired when the component loses focus.

ClientValidatedEvent

Fired after client-side validation changes the component’s validity.

ComponentValueChangeEvent

Fired when the component value changes.

CompositionEndEvent

Fired when a text composition session ends.

CompositionStartEvent

Fired when a text composition session starts.

CompositionUpdateEvent

Fired when text in an active composition session changes.

DetachEvent

Fired when the component is detached from the UI.

FocusEvent

Fired when the component receives focus.

InputEvent

Fired when the user changes the input value.

KeyDownEvent

Fired when the user presses a key while the component has focus.

KeyPressEvent

Fired when a character-producing key is pressed.

statusChangeHandler

Handles changes to the component’s validation status.

validator

Adds a validator instance to the component.

Elements

A textArea can include tooltip, prefix, suffix, and validator as its nested elements.

See Also