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.

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

Vaadin

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".

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.

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"

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 name to the component.

See the HasTheme mixin interface for more information.

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".