Textbox/Textarea elements

A TextboxFormElement writes either an <input> or a <textarea> tag to the output.

Element and builder

The ViewElement implementation is TextboxFormElement, which also has a specialized version TextareaFormElement. Both of these elements can be configured via a TextboxViewElementBuilder. A builder can also be created by using the BootstrapUiBuilders#textbox or BootstrapUiBuilders#textarea factory methods.

Configurable attributes

A TextboxFormElement can easily be customized through a variety of attributes.

Attribute Description

type

Specifies the type attribute on an <input> element tag. More information and a listing of the available types can be found in the section Type attribute.

placeholder

Sets a placeholder that is rendered if no data is present.

text

The value that the element holds.

maxLength

The maximum amount of characters that can be entered in the field.

disableLineBreaks

Whether line breaks are allowed within the textbox or not.

A TextAreaElement is a specialized TextBoxFormElement and contains some additional properties.

Setting Description Default value

rows

The initial rows that should be available in the textarea

3

autoSize

Whether the textarea should grow and shrink with content that is added.

true

Type attribute

The type of a TextboxFormElement influences the type of the html element that is rendered. For example, instead of a text input element, a password input element could be rendered. The default type for a TextboxFormElement is TextboxFormElement.Type.TEXT

Following is a list of all available types:

  • TEXT

  • PASSWORD

  • DATETIME

  • DATETIME_LOCAL

  • DATE

  • MONTH

  • TIME

  • WEEK

  • NUMBER

  • EMAIL

  • URL

  • SEARCH

  • TEL

  • COLOR

Examples

Creating a textbox

Given the following builder configuration:

BootstrapUiBuilders.textbox()
                   .build();

The following markup would be rendered:

<input type="text" class="form-control">

Multiline & Autosizing

Autosizing is provided by the Jack Moore Autosize library and is registered as an additional web resource via the BootstrapUiFormElementsWebResources bundle. Its functionality is executed based on the presence of a js-autosize html class on the TextareaFormElement that is rendered.

Unless explicitly set to false, autosizing will be active for the textarea element that is rendered.

Given the following builder configuration:

BootstrapUiBuilders.textbox()
                   .autoSize()
                   .multiLine( 3 )
                   .build();

// Equivalent configuration as the above
BootstrapUiBuilders.textarea()
                   .build();

The following markup would be rendered:

<textarea rows="3" class="form-control js-autosize" style="overflow: hidden; overflow-wrap: break-word; resize: horizontal; height: 74px;"></textarea>