Time Input | astryx-vue

Time

Usage

TimeInput edits a time of day. The value is an ISO time, HH:MM or HH:MM:SS, or null.

vue

<script setup lang="ts">
import { TimeInput } from '@astryx-vue/core/TimeInput'
import { shallowRef } from 'vue'

const time = shallowRef<string | null>('14:30')
</script>

<template>
  <TimeInput v-model="time" label="Time" />
</template>

The default hour format is 12-hour. Arrow keys step by increment minutes. A fine pointer gets a typed field. adaptive-native uses the platform time control on a coarse pointer. adaptive-bottom-sheet uses hour and minute wheels on a coarse pointer. bottom-sheet uses those wheels on every pointer. Seconds, a step other than one minute, or a preset interval send the platform control back to typed text; the wheels still show seconds. Placeholder and clear text follow the locale.

Anatomy

Element	Description
Clock icon	A leading clock icon that identifies the field and opens the browser/OS picker in native mode.
Time control	A real input type=time in native modes, or Astryx's editable text field for fine pointers, presentation="text-input", seconds, and custom increments.
Clear button	A trailing button to reset the value, shown when hasClear is true and a value is set.
Status icon	A trailing icon indicating error, warning, or success state.
Spinner	Replaces trailing content during loading to show an async action is in progress.

Best practices

Guideline	Practice
Do	Set `min` and `max` when only part of the day is valid.
Do	Use `hourFormat="24h"` when the surrounding product already speaks in 24-hour time.
Don't	Ask for a calendar date here. Use DateInput or DateTimeInput.

Examples

Constrained

Dinner reservation

Evening seating: 5 PM – 10 PM

Dinner seating is limited to 5 PM through 10 PM.

Formats

Format variations for different contexts

24-hour

With seconds

24-hour time, and a value that keeps seconds.

Increment

Appointment slot

Use arrow keys to change by 15 minutes

Arrow keys move the value by 15 minutes.

States

Disabled field

Error message

Time must be during business hours

Warning message

Early morning — are you sure?

Success message

Time slot is available

Disabled, error, warning, and success.

Bottom sheet

Start

Hour and minute wheels, on both a mouse and a coarse pointer.

Usage ​