Common Attributes

autocapitalize

MDN

Sets the autocapitalize HTML attribute. It is used to define whether the text entered by the user should be automatically capitalized or not.

autocomplete

MDN

Sets the autocomplete HTML attribute for indicating whether the value of this component can be automatically completed by the browser.

autocorrect

MDN

Enable or disable the autocorrect HTML attribute for the field.

This only supported by Safari.

autofocus

Specify that the component should have input focus when the page loads.

Possible values are true, false. By default, all components are not focused.

classNames

Vaadin

Adds a CSS class name to the component.

clearButtonVisible

Vaadin

Sets the visibility of the button which clears the field.

colspan

Sets the number of grid columns that the component should occupy.

Default is 1.

dataContainer

Sets a data container defined in the data section of the screen XML descriptor.

When you set some instance container as a value of the dataContainer attribute, you should also set the property attribute.

datatype

Sets a data type of the component’s content. Possible values:

  • boolean

  • byteArray

  • char

  • date

  • dateTime

  • decimal

  • double

  • fileRef

  • int

  • localDate

  • localDateTime

  • localTime

  • long

  • offsetDateTime

  • offsetTime

  • string

  • time

  • uri

  • uuid

enabled

Vaadin

Sets the UI object explicitly disabled or enabled.

errorMessage

Sets an error message to the component.

height

Vaadin

Sets the height of the component.

The height should be in a format understood by the browser, for example, "100px" or "2.5em".

helperText

Vaadin

Defines a text adjacent to the field that can be used, for example, to inform to the users which values it expects.

id

An identifier of the component.

It is recommended to create identifiers according to the rules for Java identifiers and use camelŠ”ase, for example: userGrid, filterPanel. The id attribute can be specified for any component and should be unique within a view.

invalid

Sets an invalid state to the field considering the result of the field validation.

  • If invalid=false and validation is not passed, then the field is valid.

  • If invalid=false and validation is passed, then the field is valid.

  • If invalid=true and validation is not passed, then the field is invalid.

  • If invalid=true and validation is passed, then the field is valid.

label

Vaadin

Specifies the label of the component.

The attribute value can either be the text itself or a key in the message bundle. In case of a key, the value should begin with the msg:// prefix.

maxHeight

MDN
Vaadin

Sets the max-height CSS property of the component. The height should be in a format understood by the browser, for example, "100px" or "2.5em".

maxWidth

MDN
Vaadin

Sets the max-width CSS property of the component. The width should be in a format understood by the browser, for example, "100px" or "2.5em".

metaClass

Defines the columns type of dataGrid if no dataContainer attribute is defined declaratively. Defining the metaClass attribute in XML is equivalent to setting empty items for dataGrid, or treeDataGrid, thus you can set the items programmatically in a view controller.

minHeight

MDN
Vaadin

Sets the min-height CSS property of the component. The height should be in a format understood by the browser, for example, "100px" or "2.5em".

minWidth

MDN
Vaadin

Sets the min-width CSS property of the component. The width should be in a format understood by the browser, for example, "100px" or "2.5em".

pattern

MDN
Vaadin

Sets a regular expression for the value to pass on the client-side. The pattern must be a valid JavaScript Regular Expression that matches the entire value, not just some subset.

placeholder

Vaadin

Defines a hint to the user of what can be entered in the component.

property

Sets the name of an entity attribute, which value will be displayed and edited by this visual component.

property is always used together with the dataContainer attribute.

readOnly

Vaadin

Sets a boolean value specifying whether the component is put read-only mode or not. The component in read-only mode typically looks visually different to signal to the user that the value cannot be edited.

required

Vaadin

Indicates that this field requires a value.

The required indicator will not be visible, if the label property is not set for the component.

requiredIndicatorVisible

Vaadin

Sets the required indicator visible or not. If set visible, it is visually indicated in the user interface.

requiredMessage

Used together with the required attribute. It sets a message that will be displayed to a user when the component has no value.

The attribute can contain a message or a key from message bundle, for example: requiredMessage="msg://infoTextField.requiredMessage"

tabIndex

MDN

Sets the tabindex attribute in the component. The tabIndex indicates if its element can be focused, and if/where it participates in sequential keyboard navigation:

  • A negative value (usually tabindex = -1 means that the component should be focusable, but should not be reachable via sequential keyboard navigation.

  • tabindex = 0 means that the component should be focusable in sequential keyboard navigation, but its order is defined by the document’s source order.

  • A positive value means the component should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex = 4 would be focused before tabindex = 5, but after tabindex = 3. If multiple components share the same positive tabindex value, their order relative to each other follows their position in the document source.

text

A text content of the component.

The attribute value can either be the text itself or a key in the message bundle. In case of a key, the value should begin with the msg:// prefix.

There are two ways of setting a key:

  • A short key - in this case the message will be searched in the message group of the current view. For example: msg://infoField.caption

  • Full key including message group, for example: msg://com.company.sample.view.user/infoField.caption

themeNames

Adds a theme to the component.

title

The value of the attribute is set to the title and aria-label HTML attributes. Most components interpret it as a tooltip.

valueChangeMode

Vaadin

Sets a new value change mode for the component.

valueChangeTimeout

Vaadin

Applies the value change timeout of the given mode on the registration of the DOM event listener that synchronizes. It has any effect only for LAZY, or TIMEOUT.

visible

Vaadin

Sets visibility of the component. Possible values - true, false.

width

Vaadin

Sets the width of the component. The width should be in a format understood by the browser, for example, "100px" or "2.5em".