import json5 from 'json5'

import { upperFirst, camelCase, kebabCase } from 'scule'

import { hash } from 'ohash'

import { CalendarDate } from '@internationalized/date'

import { CalendarDate, Time } from '@internationalized/date'

import * as theme from '#build/ui'

import { get, set } from '#ui/utils'

}

type CastDateValue = [number, number, number]

type CastTimeValue = [number, number, number]

const castMap: Record<string, Cast> = {

'DateValue': {

return `{ start: new CalendarDate(${value.start.year}, ${value.start.month}, ${value.start.day}), end: new CalendarDate(${value.end.year}, ${value.end.month}, ${value.end.day}) }`

}

},

'TimeValue': {

get: (args: CastTimeValue) => new Time(...args),

template: (value: Time) => {

return value ? `new Time(${value.hour}, ${value.minute}, ${value.second})` : 'null'

}

}

}

<script setup lang="ts">

import { Time } from '@internationalized/date'

const time = shallowRef(new Time(12, 30, 0))

</script>

<template>

<UFormField label="Time" help="Specify the time" required>

<UInputTime v-model="time" />

</UFormField>

</template>

---

title: InputTime

description: 'An input for selecting a time.'

category: form

links:

- label: TimeField

icon: i-custom-reka-ui

to: https://reka-ui.com/docs/components/time-field

- label: GitHub

icon: i-simple-icons-github

to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/InputTime.vue

navigation.badge: Soon

---

## Usage

Use the `v-model` directive to control the selected date.

::component-code

---

cast:

modelValue: TimeValue

ignore:

- modelValue

external:

- modelValue

props:

modelValue: [12, 30, 0]

---

::

Use the `default-value` prop to set the initial value when you do not need to control its state.

::component-code

---

cast:

defaultValue: TimeValue

ignore:

- defaultValue

external:

- defaultValue

props:

defaultValue: [12, 30, 0]

---

::

::note

This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.

::

### Hour Cycle

Use the `hour-cycle` prop to change the hour cycle of the InputTime. Defaults to `12`.

::component-code

---

cast:

defaultValue: TimeValue

ignore:

- hourCycle

- defaultValue

external:

- defaultValue

props:

hourCycle: 24

defaultValue: [16, 30, 0]

---

::

### Color

Use the `color` prop to change the color of the InputTime.

::component-code

---

props:

color: neutral

highlight: true

---

::

::note

The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.

::

### Variant

Use the `variant` prop to change the variant of the InputTime.

::component-code

---

props:

variant: subtle

---

::

### Size

Use the `size` prop to change the size of the InputTime.

::component-code

---

props:

size: xl

---

::

### Icon

Use the `icon` prop to show an [Icon](/docs/components/icon) inside the InputTime.

::component-code

---

props:

icon: 'i-lucide-clock'

---

::

::note

Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.

::

### Avatar

Use the `avatar` prop to show an [Avatar](/docs/components/avatar) inside the InputTime.

::component-code

---

prettier: true

props:

avatar:

src: 'https://github.com/vuejs.png'

size: md

variant: outline

---

::

### Disabled

Use the `disabled` prop to disable the InputTime.

::component-code

---

props:

disabled: true

---

::

## Examples

### Within a FormField

You can use the InputTime within a [FormField](/docs/components/form-field) component to display a label, help text, required indicator, etc.

::component-example

---

name: 'input-time-form-field-example'

---

::

## API

### Props

:component-props

### Slots

:component-slots

### Emits

:component-emits

## Theme

:component-theme

## Changelog

:component-changelog

'input-menu',

'input-number',

'input-tags',

'input-time',

'input',

'kbd',

'link',

<script setup lang="ts">

import { Time } from '@internationalized/date'

import theme from '#build/ui/input-time'

const colors = Object.keys(theme.variants.color)

const sizes = Object.keys(theme.variants.size)

const variants = Object.keys(theme.variants.variant)

const attrs = reactive({

color: [theme.defaultVariants.color],

size: [theme.defaultVariants.size],

variant: [theme.defaultVariants.variant]

})

const value = shallowRef(new Time(12, 30))

</script>

<template>

<Navbar>

<USelect v-model="attrs.color" :items="colors" multiple />

<USelect v-model="attrs.variant" :items="variants" multiple />

<USelect v-model="attrs.size" :items="sizes" multiple />

</Navbar>

<Matrix v-slot="props" :attrs="attrs">

<UInputTime v-model="value" autofocus v-bind="props" />

<UInputTime :default-value="new Time(12, 30)" v-bind="props" />

<UInputTime highlight v-bind="props" />

<UInputTime disabled v-bind="props" />

<UInputTime required v-bind="props" />

<UInputTime icon="i-lucide-clock" v-bind="props" />

<UInputTime icon="i-lucide-clock" trailing v-bind="props" />

<UInputTime :avatar="{ src: 'https://github.com/benjamincanac.png' }" icon="i-lucide-clock" trailing v-bind="props" />

<UInputTime loading v-bind="props" />

<UInputTime loading trailing v-bind="props" />

<UInputTime loading icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" v-bind="props" />

</Matrix>

</template>