Time Picker

Allows users to select a specific time using an input field and time picker interface.

In a Form

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

<template>
  <form>
    <VLayout column-spacing="small" column-basis="block">
      <div>
        <VTimePicker name="time" label="Start time" required />
      </div>
      <div class="buttons">
        <VButton label="Reset" type="reset" appearance="outlined" />
        <VButton label="Submit" appearance="filled" type="submit" />
      </div>
    </VLayout>
  </form>
</template>

<style scoped>
.buttons {
  display: flex;
  gap: 12px;
}
</style>

<form>
  <vwc-layout column-spacing="small" column-basis="block">
    <div>
      <vwc-time-picker name="time" label="Start time" required></vwc-time-picker>
    </div>
    <div class="buttons">
      <vwc-button label="Reset" type="reset" appearance="outlined"></vwc-button>
      <vwc-button label="Submit" appearance="filled" type="submit"></vwc-button>
    </div>
  </vwc-layout>
</form>

<style>
  .buttons {
    display: flex;
    gap: 12px;
  }
</style>