NumberField
Description
<vaadin-number-field>
is an input field web component that only accepts numeric input.
<vaadin-number-field label="Balance"></vaadin-number-field>
Styling
<vaadin-number-field>
provides the same set of shadow DOM parts and state attributes as <vaadin-text-field>
.
See <vaadin-text-field>
for the styling documentation.
In addition to <vaadin-text-field>
parts, the following parts are available for theming:
Part name | Description |
---|---|
increase-button |
Increase ("plus") button |
decrease-button |
Decrease ("minus") button |
Note, the input-prevented
state attribute is only supported when allowedCharPattern
is set.
See Styling Components documentation.
Change events
Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
the component can fire either a change
event or an unparsable-change
event:
Value change | Event |
---|---|
empty => parsable | change |
empty => unparsable | unparsable-change |
parsable => empty | change |
parsable => parsable | change |
parsable => unparsable | change |
unparsable => empty | unparsable-change |
unparsable => parsable | change |
unparsable => unparsable | - |
Note, there is currently no way to detect unparsable => unparsable changes because the browser doesn't provide access to unparsable values of native [type=number] inputs.
Properties
accessibleName
Type: string | null | undefined
String used to label the component to screen reader users.
accessibleNameRef
Type: string | null | undefined
Id of the element used as label of the component to screen reader users.
allowedCharPattern
Type: string
A pattern matched against individual characters the user inputs.
When set, the field will prevent:
keydown
events if the entered key doesn't match/^allowedCharPattern$/
paste
events if the pasted text doesn't match/^allowedCharPattern*$/
drop
events if the dropped text doesn't match/^allowedCharPattern*$/
For example, to allow entering only numbers and minus signs, use:
allowedCharPattern = "[\\d-]"
autocapitalize
Type: "characters" | "none" | "off" | "on" | "sentences" | "words"
This is a property supported by Safari and Chrome that is used to control whether autocapitalization should be enabled when the user is entering/editing the text. Possible values are: characters: Characters capitalization. words: Words capitalization. sentences: Sentences capitalization. none: No capitalization.
autocomplete
Type: string | undefined
Whether the value of the control can be automatically completed by the browser. List of available options at: https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete
autocorrect
Type: boolean
This is a property supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text. Possible values are: on: Enable autocorrection. off: Disable autocorrection.
autofocus
Type: boolean
Specify that this control should have input focus when the page loads.
autoselect
Type: boolean
If true, the input text gets fully selected when the field is focused using click or touch / tap.
clearButtonVisible
Type: boolean
Set to true to display the clear icon which clears the input.
It is up to the component to choose where to place the clear icon:
in the Shadow DOM or in the light DOM. In any way, a reference to
the clear icon element should be provided via the clearElement
getter.
disabled
Type: boolean
If true, the user cannot interact with this element.
errorMessage
Type: string | null | undefined
Error to show when the field is invalid.
helperText
Type: string | null | undefined
String used for the helper text.
invalid
Type: boolean
Set to true when the field is invalid.
label
Type: string | null | undefined
The label text for the input node. When no light dom defined via [slot=label], this value will be used.
manualValidation
Type: boolean
Set to true to enable manual validation mode. This mode disables automatic
constraint validation, allowing you to control the validation process yourself.
You can still trigger constraint validation manually with the validate()
method
or use checkValidity()
to assess the component's validity without affecting
the invalid state. In manual validation mode, you can also manipulate
the invalid
property directly through your application logic without conflicts
with the component's internal validation.
max
Type: number | null | undefined
The maximum value of the field.
min
Type: number | null | undefined
The minimum value of the field.
name
Type: string
The name of this field.
placeholder
Type: string
A hint to the user of what can be entered in the field.
readonly
Type: boolean
When present, it specifies that the field is read-only.
required
Type: boolean
Specifies that the user must fill in a value.
step
Type: number
Specifies the allowed number intervals of the field.
stepButtonsVisible
Type: boolean
Set to true to show increase/decrease buttons.
title
Type: string
The text usually displayed in a tooltip popup when the mouse is over the field.
value
Type: string
The value of the field.
Methods
checkValidity
Type: (() => boolean) & (() => boolean)
Override the method from InputConstraintsMixin
to enforce HTML constraint validation even if
the user didn't add any constraints explicitly:
the field has to be regardless checked for bad input.
clear
Type: () => void
Clear the value of the field.
validate
Type: () => boolean
Validates the field and sets the invalid
property based on the result.
The method fires a validated
event with the result of the validation.
Events
change
Type: NumberFieldChangeEvent
Fired when the user commits a value change.
input
Type: CustomEvent
Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
invalid-changed
Type: NumberFieldInvalidChangedEvent
Fired when the invalid
property changes.
validated
Type: NumberFieldValidatedEvent
Fired whenever the field is validated.
value-changed
Type: NumberFieldValueChangedEvent
Fired when the value
property changes.
Types
NumberFieldChangeEvent
/**
* Fired when the user commits a value change.
*/
export type NumberFieldChangeEvent = Event & {
target: NumberField;
};
NumberFieldInvalidChangedEvent
/**
* Fired when the `invalid` property changes.
*/
export type NumberFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
NumberFieldValidatedEvent
/**
* Fired whenever the field is validated.
*/
export type NumberFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
NumberFieldValueChangedEvent
/**
* Fired when the `value` property changes.
*/
export type NumberFieldValueChangedEvent = CustomEvent<{ value: string }>;