Usage
Use the v-model directive to control the selected date.
<script setup lang="ts">
const value = ref(new Time(12, 30, 0))
</script>
<template>
<UInputTime v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<script setup lang="ts">
const defaultValue = ref(new Time(12, 30, 0))
</script>
<template>
<UInputTime :default-value="defaultValue" />
</template>
@internationalized/date package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.Hour Cycle
Use the hourCycle prop to change the hour cycle of the InputTime.
<script setup lang="ts">
const defaultValue = ref(new Time(16, 30, 0))
</script>
<template>
<UInputTime :hour-cycle="24" :default-value="defaultValue" />
</template>
Color
Use the color prop to change the color of the InputTime.
<template>
<UInputTime color="neutral" highlight />
</template>
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.
<template>
<UInputTime variant="subtle" />
</template>
Size
Use the size prop to change the size of the InputTime.
<template>
<UInputTime size="xl" />
</template>
Icon
Use the icon prop to show an Icon inside the InputTime.
<template>
<UInputTime icon="i-lucide-clock" />
</template>
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 inside the InputTime.
<template>
<UInputTime
:avatar="{
src: 'https://github.com/vuejs.png'
}"
size="md"
variant="outline"
/>
</template>
Disabled
Use the disabled prop to disable the InputTime.
<template>
<UInputTime disabled />
</template>
Examples
Within a FormField
You can use the InputTime within a FormField component to display a label, help text, required indicator, etc.
<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>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
color |
|
|
variant |
|
|
size |
|
|
highlight |
Highlight the ring color like a focus state. | |
autofocus |
| |
autofocusDelay |
|
|
locale |
|
The locale to use for formatting and parsing numbers. |
defaultValue | The default value for the calendar
| |
defaultPlaceholder | The default placeholder date
| |
placeholder | The placeholder date, which is used to determine what time to display when no time is selected. This updates as the user navigates the field
| |
modelValue |
The controlled checked state of the field. Can be bound as
| |
hourCycle |
The hour cycle used for formatting times. Defaults to the local preference | |
step |
The stepping interval for the time fields. Defaults to
| |
granularity |
The granularity to use for formatting times. Defaults to minute if a Time is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity | |
hideTimeZone |
Whether or not to hide the time zone segment of the field | |
maxValue | The maximum date that can be selected
| |
minValue |
The minimum date that can be selected
| |
disabled |
Whether or not the time field is disabled | |
readonly |
Whether or not the time field is readonly | |
id |
Id of the element | |
asChild |
Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
name |
The name of the field. Submitted with its owning form as part of a name/value pair. | |
required |
When | |
icon |
Display an icon based on the | |
avatar |
Display an avatar on the left side.
| |
leading |
When | |
leadingIcon |
Display an icon on the left side. | |
trailing |
When | |
trailingIcon |
Display an icon on the right side. | |
loading |
When | |
loadingIcon |
|
The icon when the |
ui |
|
Slots
| Slot | Type |
|---|---|
leading |
|
default |
|
trailing |
|
Emits
| Event | Type |
|---|---|
blur |
|
change |
|
focus |
|
update:modelValue |
|
update:placeholder |
|
Theme
export default defineAppConfig({
ui: {
inputTime: {
slots: {
base: [
'group relative inline-flex items-center rounded-md select-none',
'transition-colors'
],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-dimmed',
segment: [
'rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75',
'transition-colors'
]
},
variants: {
fieldGroup: {
horizontal: {
root: 'group has-focus-visible:z-[1]',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group has-focus-visible:z-[1]',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: [
'px-2 py-1 text-xs gap-1',
'gap-0.25'
],
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
segment: 'not-data-[segment=literal]:w-6'
},
sm: {
base: [
'px-2.5 py-1.5 text-xs gap-1.5',
'gap-0.5'
],
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
segment: 'not-data-[segment=literal]:w-6'
},
md: {
base: [
'px-2.5 py-1.5 text-sm gap-1.5',
'gap-0.5'
],
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
segment: 'not-data-[segment=literal]:w-7'
},
lg: {
base: [
'px-3 py-2 text-sm gap-2',
'gap-0.75'
],
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
segment: 'not-data-[segment=literal]:w-7'
},
xl: {
base: [
'px-3 py-2 text-base gap-2',
'gap-0.75'
],
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6',
segment: 'not-data-[segment=literal]:w-8'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
}
},
compoundVariants: [
{
variant: 'outline',
class: {
segment: 'focus:bg-elevated'
}
},
{
variant: 'soft',
class: {
segment: 'focus:bg-accented/50 group-hover:focus:bg-accented'
}
},
{
variant: 'subtle',
class: {
segment: 'focus:bg-accented'
}
},
{
variant: 'ghost',
class: {
segment: 'focus:bg-elevated group-hover:focus:bg-accented'
}
},
{
variant: 'none',
class: {
segment: 'focus:bg-elevated'
}
},
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
inputTime: {
slots: {
base: [
'group relative inline-flex items-center rounded-md select-none',
'transition-colors'
],
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-dimmed',
segment: [
'rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75',
'transition-colors'
]
},
variants: {
fieldGroup: {
horizontal: {
root: 'group has-focus-visible:z-[1]',
base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
},
vertical: {
root: 'group has-focus-visible:z-[1]',
base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
}
},
size: {
xs: {
base: [
'px-2 py-1 text-xs gap-1',
'gap-0.25'
],
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
segment: 'not-data-[segment=literal]:w-6'
},
sm: {
base: [
'px-2.5 py-1.5 text-xs gap-1.5',
'gap-0.5'
],
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
segment: 'not-data-[segment=literal]:w-6'
},
md: {
base: [
'px-2.5 py-1.5 text-sm gap-1.5',
'gap-0.5'
],
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
segment: 'not-data-[segment=literal]:w-7'
},
lg: {
base: [
'px-3 py-2 text-sm gap-2',
'gap-0.75'
],
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
segment: 'not-data-[segment=literal]:w-7'
},
xl: {
base: [
'px-3 py-2 text-base gap-2',
'gap-0.75'
],
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6',
segment: 'not-data-[segment=literal]:w-8'
}
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent'
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
highlight: {
true: ''
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
}
},
compoundVariants: [
{
variant: 'outline',
class: {
segment: 'focus:bg-elevated'
}
},
{
variant: 'soft',
class: {
segment: 'focus:bg-accented/50 group-hover:focus:bg-accented'
}
},
{
variant: 'subtle',
class: {
segment: 'focus:bg-accented'
}
},
{
variant: 'ghost',
class: {
segment: 'focus:bg-elevated group-hover:focus:bg-accented'
}
},
{
variant: 'none',
class: {
segment: 'focus:bg-elevated'
}
},
{
color: 'primary',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary'
},
{
color: 'neutral',
variant: [
'outline',
'subtle'
],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted'
},
{
leading: true,
size: 'xs',
class: 'ps-7'
},
{
leading: true,
size: 'sm',
class: 'ps-8'
},
{
leading: true,
size: 'md',
class: 'ps-9'
},
{
leading: true,
size: 'lg',
class: 'ps-10'
},
{
leading: true,
size: 'xl',
class: 'ps-11'
},
{
trailing: true,
size: 'xs',
class: 'pe-7'
},
{
trailing: true,
size: 'sm',
class: 'pe-8'
},
{
trailing: true,
size: 'md',
class: 'pe-9'
},
{
trailing: true,
size: 'lg',
class: 'pe-10'
},
{
trailing: true,
size: 'xl',
class: 'pe-11'
},
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin'
}
},
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline'
}
}
}
})
]
})