numberField

numberField has many of the same features as textField, but it accepts only numeric input.

XML Element

numberField

Java Class

JmixNumberField

Basics

LIVE DEMO

An example of numberField:

<numberField id="numberField" label="NumberField"/>
<numberField id="maxMinNumberField" label="With max/min" max="100" min="10"
              helperText="Max value is 100, min value is 10"/>
numberField doesn’t handle formatting. Use TypedTextField when you need localized number formatting or support for different data types.

Data-aware numberField

LIVE DEMO

Use the dataContainer and property attributes to bind numberField to an entity attribute. The data container provides the entity instance, and property identifies the numeric attribute to edit.

The following example produces a data-aware numberField. The entity attribute must be of a numeric type.

XML
<data>
    <instance id="pointDc"
              class="io.jmix.uisamples.entity.Point"
              fetchPlan="_local"/>
</data>
<layout>
    <numberField id="numberField" label="Field connected to a container" width="15em"
                     dataContainer="pointDc" property="x"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>
Java
@ViewComponent
protected InstanceContainer<Point> pointDc;
@ViewComponent
protected Span spanValue;

@Autowired
protected Metadata metadata;

@Subscribe
protected void onInit(InitEvent event) {
    Point point = metadata.create(Point.class);
    point.setX(31.32);
    pointDc.setItem(point);
}

@Subscribe("numberField")
protected void onNumberFieldValueChange(ComponentValueChangeEvent<NumberField, Number> changeEvent) {
    spanValue.setText(String.valueOf(pointDc.getItem().getX()));
}

Validation

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

The following predefined validators are available for numberField:

XML Element

validators

Predefined validators

custom - doubleMax - doubleMin - negative - negativeOrZero - notNull - positive - positiveOrZero

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 numberField:

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

Sets the maximum .

—

min

Sets the minimum .

—

step

Sets the step.

—

stepButtonsVisible

Controls whether increment and decrement buttons are displayed.

—

value

Sets the component value.

—

The following shared attributes are supported by numberField:

id - alignSelf - allowedCharPattern - 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 - themeNames - title - valueChangeMode - valueChangeTimeout - visible - width

Handlers

The following handlers are specific to numberField:

Name Description

validator

Validates the component value.

The following shared handlers are supported by numberField:

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

Elements

A numberField can include prefix, suffix, tooltip, and validator as its nested elements.

See Also