Number Field

<script setup lang="ts">
import { VNumberField } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNumberField label="First name" />
</template>

<script type="module">
  import { registerNumberField } from '@vonage/vivid-api';
  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-api-vue';
</script>

<template>
  <VNumberField label="With step" :step="0.1" value="1.5" />
</template>

<vwc-number-field label="With step" step="0.1" value="1.5"></vwc-number-field>

<script setup lang="ts">
import { VNumberField } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNumberField label="With minimum" :min="100" />
</template>

<vwc-number-field label="With minimum" min="100"></vwc-number-field>

<script setup lang="ts">
import { VNumberField } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNumberField label="With maximum" :max="2" />
</template>

<vwc-number-field label="With maximum" max="2"></vwc-number-field>

<script setup lang="ts">
import { VNumberField } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNumberField label="Timeout">
    <template #helper-text>
      <span>The timeout in seconds. <a href="#">Guide to setting timeouts</a></span>
    </template>
  </VNumberField>
</template>

<vwc-number-field label="Timeout">
  <span slot="helper-text">
    The timeout in seconds. <a href="#">Guide to setting timeouts</a>
  </span>
</vwc-number-field>

<script setup lang="ts">
import { VContextualHelp, VNumberField } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNumberField label="Wanted quantity">
    <template #contextual-help>
      <VContextualHelp>How many apples do you need</VContextualHelp>
    </template>
  </VNumberField>
</template>

<vwc-number-field label="Wanted quantity">
  <vwc-contextual-help slot="contextual-help">How many apples do you need</vwc-contextual-help>
</vwc-number-field>