Number Field

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

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

<template>
  <h3 class="tight">VBC for Microsoft Teams</h3>
  <div class="wrapper">
    <VNumberField class="number-field" label="Currently in use" :value="1" />
    <VButton appearance="filled" label="Add Licence" />
  </div>
</template>

<style>
.wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-block-start: 16px;
}
.number-field {
  inline-size: 120px;
}
</style>

<h3 class="tight">VBC for Microsoft Teams</h3>
<div class="wrapper">
  <vwc-number-field class="number-field" label="Currently in use" value="1"></vwc-number-field>
  <vwc-button appearance="filled" label="Add Licence"></vwc-button>
</div>

<style>
  .wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-block-start: 16px;
  }
  .number-field {
    inline-size: 120px;
  }
</style>