Vivid Vue
On this page

VNumberField ​

Props ​

NameTypeDescription
success-textstringThe success text for the form element.
helper-textstringThe helper text for the form element.
char-countbooleanWhether to show the character count.
labelstringThe label for the form element.
error-textstringThe error text for the form element.
iconEnum:
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
... 1208 more ...		A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
aria-currentEnum:
page
step
location
date
time
true
false		Indicates the element that represents the current item within a container or set of related elements.
disabledbooleanSets the element's disabled state. A disabled element will not be included during form submission.
initial-valuestringThe initial value of the form. This value sets the value property only when the value property has not been explicitly set.
valuestringThe current value of the element. This property serves as a mechanism to set the value property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding.
namestringThe name of the element. This element's value will be surfaced during form submission under the provided name.
requiredbooleanRequire the field to be completed prior to form submission.
readonlybooleanWhen true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
autofocusbooleanIndicates that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus
placeholderstringSets the placeholder value of the element, generally used to provide a hint to the user.
liststringAllows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
maxlengthnumberThe maximum number of characters a user can enter.
minlengthnumberThe minimum number of characters a user can enter.
sizenumberSets the width of the element to a specified number of characters.
scaleEnum:
condensed
normal		The size the number-field should have.
stepnumberAmount to increment or decrement the value by
maxnumberThe maximum the value can be
minnumberThe minimum the value can be
increment-button-aria-labelstring
decrement-button-aria-labelstring
appearanceEnum:
fieldset
ghost
shapeEnum:
rounded
pill
autoCompletestring

Events ​

NameEvent TypeDescription
clickMouseEventFires 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.
focusFocusEventFires when the element receives focus.
blurFocusEventFires when the element loses focus.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.
inputCustomEvent<undefined>Fires a custom 'input' event when the value has changed
changeCustomEvent<undefined>Fires a custom 'change' event when the value has changed

Slots ​

NameDescription
helper-textDescribes how to use the number-field. Alternative to the helper-text attribute.

Methods ​

NameTypeDescription
stepChanged(_: number,next: number) => unknown
validate() => unknown{@inheritDoc (FormAssociated:interface).validate}
stepUp() => unknownIncrements the value using the step value
stepDown() => unknownDecrements the value using the step value
select() => unknownSelects all the text in the number field