Docs

Docs

Field Components

The Vaadin components that the field() function binds, and the Java types of the properties that they edit.

The field() function binds the following Vaadin components. Each component edits a property of one of the listed Java types:

Component Java type of the property

Text Field, Text Area, Password Field, Email Field

String

Integer Field, Number Field

A number type, such as int, Integer, double, or BigDecimal

Checkbox

boolean

Date Picker

LocalDate

Time Picker

LocalTime

Date Time Picker

LocalDateTime

Select, Radio Button Group

String or an enum, matched to the values of the items

Combo Box

String or an enum, matched to the values of the items, or an object, which is the selected item

Checkbox Group

A list or a set of String

Multi-Select Combo Box

A list or a set of the items

Custom Field

String. By default, the value combines the values of the fields inside the custom field, separated by tab characters.

Rich Text Editor

String, in the Delta format of the editor

For example, a combo box can edit a Country property of a form, when its items are Country objects:

Source code
tsx
<ComboBox label="Country" items={countries} itemLabelPath="name" itemValuePath="name" {...field(model.country)} />

See Changing Values from Code for the whole example.

When the user empties a number field, the value of a nullable number becomes undefined. A non-nullable number becomes NaN, and the field shows the error "must be a number".

The field() function throws an error for a component that isn’t a field, such as a List Box. It doesn’t read the state of a Switch, so use a checkbox for a boolean property instead.

Updated –