Number Field
Allows users to enter a number in a text field or use buttons to increment or decrement the value.
import { registerNumberField } from '@vonage/vivid';
registerNumberField('your-prefix');
<script setup lang="ts">
import { VNumberField } from '@vonage/vivid-vue';
</script>
<template>
<VNumberField label="First name" />
</template>
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.
- Constraint validation with
minlengthandmaxlengthis not supported.
- Type:
number - Default:
1
Set the step attribute to change the step value for the number field.
- Type:
number|undefined - Default:
undefined
Set the min attribute to set the minimum value for the number field.
- Type:
number|undefined - Default:
undefined
Set the max attribute to set the maximum value for the number field.
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:
The contextual-help slot allows you to add the Contextual Help component next to the label.
| Name | Type | Description |
|---|---|---|
| appearance | fieldset (default), ghost |
Sets the input element's appearance |
| autofocus | boolean |
Indicates that an element should be focused on page load, or when the Dialog that it is part of is displayed |
| disabled | boolean |
Whether the input element is disabled |
| error-text | string |
Sets error-text on element |
| label | string |
Label of the Text Field |
| max | string |
Maximum value of the element |
| min | string |
Minimum value of the element |
| placeholder | string |
Text that appears in the input element when it has no value set |
| readonly | boolean |
The value is not editable |
| required | boolean |
A value is required for the form to be submittable |
| size | string |
Size (in chars) of the input element |
| scale | normal (default), condensed |
Sets the display size of the input element |
| shape | rounded, pill |
Sets the shape of the input element |
| step | number, undefined (default) |
Sets to change the step value for the number field. |
| success-text | string |
Sets success-text on element |
| value | string |
The value of the input element. When specified in the HTML, corresponds to the initial value |
| valueAsNumber | number, undefined (default) |
get or set the value as a number |
| Name | Description |
|---|---|
| leading-action-items | Add rich content as the number-field's helper text |
| contextual-help | Allows you to add the Contextual Help component to be displayed next to the label. |
| Name | Type | Bubbles | Composed | Description |
|---|---|---|---|---|
| input | CustomEvent<undefined> |
Yes | Yes | Fires a custom 'input' event when the value has changed |
| change | CustomEvent<undefined> |
Yes | Yes | Fires a custom 'change' event when the value has changed |
| Name | Returns | Description |
|---|---|---|
| stepUp | void |
Increase value by step (1 if step is not set) |
| stepDown | void |
Decrease value by step (1 if step is not set) |