Common Attributes

allowedCharPattern

Vaadin

Sets a regular expression for the user input to check to the client-side. The allowed char pattern must be a valid JavaScript Regular Expression that matches a single character, not the sequence of characters.

For example, to allow entering only numbers and slash character, use "[0-9/]" pattern.

alignItems

MDN

Defines how items are aligned on the cross axis. Possible values:

  • START – items are placed at the start of the cross axis.

  • END – items are placed at the end of the cross axis.

  • CENTER – items are centered in the cross axis.

  • STRETCH – items with undefined size along the cross axis are stretched to fit the container.

  • BASELINE – items are positioned at the baseline of the container. Works for flex-direction: row only

  • AUTO – the item inherits its parent container’s alignItems value, or "stretch" if it has no parent container.

For usage examples visit the Layout Rules section.

alignSelf

MDN

Aligns individual items inside the container overriding alignItems attribute. Possible values:

  • START – item is placed at the start of the cross axis.

  • END – item is placed at the end of the cross axis.

  • CENTER – item is centered on the cross axis.

  • STRETCH – item with undefined size along the cross axis is stretched to fit the container.

  • BASELINE – item is positioned at the baseline of the container. Works for flex-direction: row only.

  • AUTO – item inherits its parent container’s alignItems value, or "stretch" if it has no parent container.

For usage examples visit the Layout Rules section.

ariaLabel

MDN

Sets a separate, visually hidden label for accessibility technologies, such as screen readers.

ariaLabelledBy

MDN

Refers to another component to set an accessible name for a visual component. Takes precedence over all other methods of providing an accessible name, including ariaLabel, and the component’s inner text.

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

Sets the autocorrect HTML attribute for the field.

It is supported only in Safari.

autofocus

Specifies 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 CSS class names to the component.

clearButtonVisible

Vaadin

Sets the visibility of the button which clears the field.

clickShortcut

Defines the keyboard shortcut to fire a click event associated with the component. The component must have an appropriate handler to process the click event, otherwise the key combination will not have any effect.

colspan

Sets the number of columns that the component should occupy if it is placed in a formLayout.

Default is 1.

css

Provides a declarative way to set CSS properties for UI components.

In this example, the css attribute is used to apply inline styles to the textField component, including setting the background color, border, padding, and font size:

<textField datatype="int"
           css="background-color: #f0f0f0;
                border: 1px solid #ccc;
                padding: 5px;
                font-size: 16px;"/>

In the example below, the css attribute is used to provide inline CSS for the button component.

<button id="stepperUpBtn"
        icon="vaadin:chevron-up"
        css="background-color: #4CAF50;
             color: #fff;
             border: none;
             padding: 10px 20px;
             font-size: 16px;
             cursor: pointer"/>

dataContainer

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

If you set an InstanceContainer in 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

Set this attribute if the component is not linked to an entity attribute. Otherwise, the data type is defined by the entity attribute type.

dateFormat

Vaadin

Sets a preferred format for date values in the component. By default, the current locale date format is used.

enabled

Vaadin

Sets the component explicitly disabled or enabled.

errorMessage

Sets an error message to the component.

flexGrow

MDN

Sets the flex grow factor for this component. When set to 0, the width is fixed.

focusShortcut

Defines the keyboard shortcut that is used to place focus on this 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 component. It can be used, for example, to inform users which values the component 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, the field is valid regardless of the validation result.

  • If invalid=true, the field is valid only if the validation is passed successfully.

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

maxLength

MDN
Vaadin

Sets the maximum number of characters a field accepts.

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 an entity class for components displaying entities, like dataGrid or entityComboBox.

Set this attribute if the component is not linked to a data container. Otherwise, the entity type is defined by the data container.

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

minLength

MDN
Vaadin

Sets the minimum number of characters a field accepts.

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

overlayClass

Specifies a list of CSS class names to set on the overlay element.

pattern

MDN
Vaadin

Sets a regular expression for the value to check to 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

Specifies whether the component is in read-only mode.

required

Vaadin

Indicates that this field requires a value.

requiredIndicatorVisible

Vaadin

Sets the required indicator visibility.

requiredMessage

Used together with the required attribute. 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"

step

Sets a custom time interval, in minutes, between values available for selection in the timePicker and dateTimePicker components. The default value is 60.

tabIndex

MDN

Sets the tabindex HTML attribute in the component. The attribute 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

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

value

Sets the value of the component. If the new value is not equal to getValue(), fires a value change event. May throw IllegalArgumentException if the value is not acceptable.

valueChangeMode

Vaadin

Sets a new value change mode for the component.

valueChangeTimeout

Vaadin

Applies the value change timeout of the given valueChangeMode.

visible

Vaadin

Sets visibility of the component.

weekNumbersVisible

Vaadin

Specifies whether week numbers are visible in the calendar overlay. This works only when the first day of week is set to Monday.

whiteSpace

MDN

Sets the white-space CSS property.

Default value is NORMAL.

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