Number Field

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

import '@vonage/vivid/number-field';

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

registerNumberField('your-prefix');

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<script type="module">
	import { registerNumberField } from 'vivid-bundle';
	registerNumberField('your-prefix');
</script>

<your-prefix-number-field
	label="First name"
	autofocus
></your-prefix-number-field>

<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 minlength and maxlength is not supported.

• Type: number
• Default: 1

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

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-number-field label="With step" step="0.1" value="1.5"></vwc-number-field>

• Type: number | undefined
• Default: undefined

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

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-number-field label="With minimum" min="100"></vwc-number-field>

• Type: number | undefined
• Default: undefined

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

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-number-field label="With maximum" max="2"></vwc-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:

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-number-field label="Timeout">
	<span slot="helper-text"
		>The timeout in seconds. <a href="#">Guide to setting timeouts</a></span
	>
</vwc-number-field>