VNumberField

Props

Name	Type	Description
appearance	Enum: fieldset ghost
auto-complete	string
autofocus	boolean	Indicates that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus
decrement-button-aria-label	string
disabled	boolean	Sets the element's disabled state. A disabled element will not be included during form submission.
error-text	string	Provides a custom error message. Any current error state will be overridden.
helper-text	string	Provides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
icon	Enum: 10-sec-backward-line 10-sec-backward-solid 10-sec-forward-line 10-sec-forward-solid 30-sec-backward-line 30-sec-backward-solid 30-sec-forward-line 30-sec-forward-solid 5-sec-backward-line 5-sec-backward-solid 5-sec-forward-line 5-sec-forward-solid ... 1231 more ...	A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
increment-button-aria-label	string
initial-value	string	The default value of the element. This value sets the value property only when the value property has not been explicitly set.
label	string	The label for the form element.
list	string	Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
max	number	The maximum the value can be
maxlength	number	The maximum number of characters a user can enter.
min	number	The minimum the value can be
minlength	number	The minimum number of characters a user can enter.
name	string	The name of the element. This element's value will be surfaced during form submission under the provided name.
placeholder	string	Sets the placeholder value of the element, generally used to provide a hint to the user.
readonly	boolean	When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
required	boolean	Require the field to be completed prior to form submission.
scale	Enum: condensed normal	The size the number-field should have.
shape	Enum: rounded pill
size	number	Sets the width of the element to a specified number of characters.
step	number	Amount to increment or decrement the value by
success-text	string	Provides a custom success message. Any current error state will be overridden.
value	string	The current value of the element.
value-as-number	number	The value property, typed as a number.

Events

Name	Event Type	Description
blur	FocusEvent	Fires when the element loses focus.
change	CustomEvent<undefined>	Fires a custom 'change' event when the value has changed
click	MouseEvent	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	FocusEvent	Fires when the element receives focus.
input	CustomEvent<undefined>	Fires a custom 'input' event when the value has changed
keydown	KeyboardEvent	Fires when a key is pressed.
keyup	KeyboardEvent	Fires when a key is released.

Slots

Name	Description
helper-text	Describes how to use the number-field. Alternative to the helper-text attribute.

Methods

Name	Type	Description
checkValidity	() => boolean	Return the current validity of the element.
reportValidity	() => boolean	Return the current validity of the element. If false, fires an invalid event at the element.
select	() => unknown	Selects all the text in the number field
stepChanged	(_: number,next: number) => unknown
stepDown	() => unknown	Decrements the value using the step value
stepUp	() => unknown	Increments the value using the step value
validate	() => unknown	{@inheritDoc (FormAssociated:interface).validate}