Number Field

Allows users to enter a number in a text field or use buttons to increment or decrement the value.

Usage

import { registerNumberField } from '@vonage/vivid';

registerNumberField('your-prefix');

About Number Field

The number-field component allows users to enter a number in a text field. It follows the native number field specification.

The component is not appropriate for values that only happen to consist of numbers but aren't strictly speaking a number, e.g. phone numbers or ZIP codes. Use the text-field component instead.

Known issues

Constraint validation with minlength and maxlength is not supported.

Step

Type: number
Default: 1

Set the step attribute to change the step value for the number field.

Min

Type: number | undefined
Default: undefined

Set the min attribute to set the minimum value for the number field.

Max

Type: number | undefined
Default: undefined

Set the max attribute to set the maximum value for the number field.

Slots

Helper-Text

The helper-text slot allows you to use rich content as the number field's helper text.

Example showing a link in the helper text:

Contextual-Help

The contextual-help slot allows you to add the Contextual Help component next to the label.

API Reference

Properties

Property	Type	Description
appearance	`'fieldset' \| 'ghost'`
autoComplete	`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 \| autofocus HTML attribute for more information.
decrementButtonAriaLabel	`string`
disabled	`boolean`	Sets the element's disabled state. A disabled element will not be included during form submission.
errorText	`string`	Provides a custom error message. Any current error state will be overridden.
helperText	`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	`IconId`	A decorative icon the custom element should have. See the [Vivid Icon Gallery](/icons/icons-gallery/) for available icons and `icon-name`s See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
incrementButtonAriaLabel	`string`
initialValue	`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 \| datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.
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 \| readonly HTML attribute for more information.
required	`boolean`	Require the field to be completed prior to form submission.
scale	`'condensed' \| 'normal'`	The size the number-field should have.
shape	`'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
successText	`string`	Provides a custom success message. Any current error state will be overridden.
value (modelValue)	`string`	The current value of the element.
valueAsNumber (valueAsNumber)	`number`	The value property, typed as a number.

Property	Type	Description
appearance	`'fieldset' \| 'ghost'`
autocomplete	`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 \| autofocus HTML attribute for more information.
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	`IconId`	A decorative icon the custom element should have. See the [Vivid Icon Gallery](/icons/icons-gallery/) for available icons and `icon-name`s See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
increment-button-aria-label	`string`
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 \| datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.
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 \| readonly HTML attribute for more information.
required	`boolean`	Require the field to be completed prior to form submission.
scale	`'condensed' \| 'normal'`	The size the number-field should have.
shape	`'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.
current-value	`string`	The current value of the element.
valueAsNumber (property only)	`number`	The value property, typed as a number.

Slots

Name	Description
contextual-help	Slot for the contextual-help component, displayed next to the label.
helper-text	Describes how to use the number-field. Alternative to the `helper-text` attribute.

Name	Description
contextual-help	Slot for the contextual-help component, displayed next to the label.
helper-text	Describes how to use the number-field. Alternative to the `helper-text` attribute.

Events

Event	Type	Description
change	`CustomEvent<undefined>`	Fires a custom 'change' event when the value has changed
input	`CustomEvent<undefined>`	Fires a custom 'input' event when the value has changed
update:modelValue	`string`	Fires when the modelValue value changes
update:valueAsNumber	`number`	Fires when the valueAsNumber value changes

Name	Type	Description
change	`CustomEvent<undefined>`	Fires a custom 'change' event when the value has changed
input	`CustomEvent<undefined>`	Fires a custom 'input' event when the value has changed

Methods

Name	Params	Returns	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		`void`	Selects all the text in the number field
stepChanged	`_: number` `next: number`	`void`
stepDown		`void`	Decrements the value using the step value
stepUp		`void`	Increments the value using the step value
validate		`void`	{@inheritDoc (FormAssociated:interface).validate}