integerField

integerField has many of the same features as textField, but it accepts only Integer input.

XML Element

integerField

Java Class

JmixIntegerField

Basics

LIVE DEMO

The integerField component is designed to provide basic functionality for inputting and displaying integer values.

An example of integerField:

<integerField id="integerField" label="IntegerField"/>
integerField doesn’t handle formatting. Use TypedTextField when you need localized number formatting or support for different data types.

Data-aware integerField

LIVE DEMO

Data binding refers to linking a visual component to a data container. Changes in the visual component or corresponding data container can trigger updates to one another. See Using Data Components for more details.

The following example produces a data-aware integerField. The entity attribute must be of Integer type.

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <integerField id="integerField" label="Field connected to a container" width="15em"
                     dataContainer="customerDc" property="age"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

The customerDc instance container holds a Customer entity. The dataContainer and property attributes bind the component to its age attribute.

Step

Vaadin

The step attribute is used to control the increment or decrement value when the user interacts with the field using the up/down arrows, or the step buttons. Step determines how much the value changes with each interaction. It helps you define the level of precision for the integer field.

The step attribute is typically used in conjunction with min and max properties to define the valid range for the number field.

The stepButtonsVisible attribute controls whether the buttons for increasing/decreasing the value are displayed or hidden.

<integerField step="1"
              stepButtonsVisible="true"
              min="1"
              max="10"
              helperText="Max 10 items"/>

Validation

To check values entered into the integerField component, you can use a validator in a nested validators element.

The following predefined validators are available for integerField:

XML Element

validators

Predefined validators

custom - digits - max - min - negativeOrZero - negative - notNull - positiveOrZero - positive

Theme Variants

LIVE DEMO

Use the themeNames attribute to apply one or more theme variants.

Variant Description Supported By

small

Makes the component smaller.

Aura, Lumo

align-left

Aligns the field value to the left side.

Aura, Lumo

align-center

Centers the field value.

Aura, Lumo

align-right

Aligns the field value to the right side.

Aura, Lumo

helper-above-field

Renders the helper text above the field, below the label.

Aura, Lumo

Attributes

The following attributes are specific to integerField:

Name Description Default

autoselect

Controls whether text is selected automatically when the field receives focus.

—

clearButtonVisible

Controls whether the field displays a clear button.

false

max

Specifies the maximum value of the field. Entering a value which is greater than max invalidates the field.

—

min

Specifies the minimum value of the field. Entering a value which is smaller than min invalidates the field.

—

step

Sets the allowed number intervals of the field. This specifies how much the value will be increased/decreased when clicking on the step buttons. See Step.

1

stepButtonsVisible

Sets the visibility of the buttons for increasing/decreasing the value accordingly to the default or specified step. See Step.

false

themeNames

Applies theme variants to the component.

—

value

Sets the component value.

—

The following shared attributes are supported by integerField:

id - alignSelf - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredMessage - tabIndex - title - valueChangeMode - valueChangeTimeout - visible - width

Handlers

The following handlers are specific to integerField:

Name Description

validator

Validates the component value.

The following shared handlers are supported by integerField:

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler

Elements

An integerField can include prefix, suffix, tooltip, and validator as its nested elements.

See Also