numberField
numberField has many of the same features as textField, but it accepts only numeric input.
XML Element |
|
|---|---|
Java Class |
|
Attributes |
id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - autoselect - classNames - clearButtonVisible - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - max - maxHeight - maxWidth - min - minHeight - minWidth - placeholder - property - readOnly - required - requiredMessage - step - stepButtonsVisible - tabIndex - themeNames - title - value - valueChangeMode - valueChangeTimeout - visible - width |
Handlers |
AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler - validator |
Elements |
Basics
An example of numberField:
<numberField clearButtonVisible="true"
value="234.433"/>
numberField doesn’t handle formatting. Use TypedTextField when you need localized number formatting or support for different data types.
|
Data Binding
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 numberField. The entity attribute must be of a numeric type.
<data>
<instance class="com.company.onboarding.entity.Step" id="stepDc">
<fetchPlan extends="_base"/>
<loader id="stepDl"/>
</instance>
</data>
<layout>
<numberField dataContainer="stepDc" property="factor"
step="0.5" stepButtonsVisible="true"/>
</layout>
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 |
|
|---|---|
Predefined validators |
custom - doubleMax - doubleMin - negative - negativeOrZero - notNull - positive - positiveOrZero |
Theme Variants
Use themeNames attribute to set a component theme.
| Variant | Description | Supported By |
|---|---|---|
|
Makes the component smaller. |
Aura, Lumo |
|
Aligns the field value to the left side. |
Aura, Lumo |
|
Centers the field value. |
Aura, Lumo |
|
Aligns the field value to the right side. |
Aura, Lumo |
|
Renders the helper text above the field, below the label. |
Aura, Lumo |
See Also
See the Vaadin Docs for more information.
