InputTime

AkarGitHub
Enables users to input specific times within a designated field.

Usage

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

12
30
PM
<script setup lang="ts">
import { Time } from '@internationalized/date'

const value = shallowRef(new Time(12, 30, 0))
</script>

<template>
  <PInputTime v-model="value" />
</template>

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

12
30
PM
<script setup lang="ts">
import { Time } from '@internationalized/date'

const defaultValue = shallowRef(new Time(12, 30, 0))
</script>

<template>
  <PInputTime :default-value="defaultValue" />
</template>
This component relies on the @internationalized/date 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.

16
30
<script setup lang="ts">
import { Time } from '@internationalized/date'

const defaultValue = shallowRef(new Time(16, 30, 0))
</script>

<template>
  <PInputTime :hour-cycle="24" :default-value="defaultValue" />
</template>

Color

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

––
––
AM
<template>
  <PInputTime color="neutral" highlight />
</template>
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.

––
––
AM
<template>
  <PInputTime variant="subtle" />
</template>

Size

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

––
––
AM
<template>
  <PInputTime size="xl" />
</template>

Icon

Use the icon prop to show an Icon inside the InputTime.

––
––
AM
<template>
  <PInputTime icon="i-lucide-clock" />
</template>
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 inside the InputTime.

––
––
AM
<template>
  <PInputTime
    :avatar="{
      src: 'https://github.com/vuejs.png'
    }"
    size="md"
    variant="outline"
  />
</template>

Disabled

Use the disabled prop to disable the InputTime.

––
––
AM
<template>
  <PInputTime disabled />
</template>

Examples

Within a FormField

You can use the InputTime within a FormField component to display a label, help text, required indicator, etc.

12
30
PM
Specify the time
<script setup lang="ts">
import { Time } from '@internationalized/date';
import { shallowRef } from 'vue';

const time = shallowRef(new Time(12, 30, 0));
</script>

<template>
  <PFormField
    label="Time"
    help="Specify the time"
    required
  >
    <PInputTime v-model="time" />
  </PFormField>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

color'primary' "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
variant'outline' "outline" | "soft" | "subtle" | "ghost" | "none"
size'md' "md" | "xs" | "sm" | "lg" | "xl"
highlightboolean

Highlight the ring color like a focus state.

autofocusboolean
autofocusDelay0 number
defaultValueTime | CalendarDateTime | ZonedDateTime
defaultPlaceholderTime | CalendarDateTime | ZonedDateTime
placeholderTime | CalendarDateTime | ZonedDateTime
modelValuenull | Time | CalendarDateTime | ZonedDateTime
hourCycle 12 | 24

The hour cycle used for formatting times. Defaults to the local preference

step DateStep

The stepping interval for the time fields. Defaults to 1.

granularity "hour" | "minute" | "second"

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

hideTimeZoneboolean

Whether or not to hide the time zone segment of the field

maxValueTime | CalendarDateTime | ZonedDateTime
minValueTime | CalendarDateTime | ZonedDateTime
disabledboolean

Whether or not the time field is disabled

readonlyboolean

Whether or not the time field is readonly

id string

Id of the element

name string

The name of the field. Submitted with its owning form as part of a name/value pair.

requiredboolean

When true, indicates that the user must set the value before the owning form can be submitted.

icon string | object

Display an icon based on the leading and trailing props.

avatar PAvatarProps

Display an avatar on the left side.

leadingboolean

When true, the icon will be displayed on the left side.

leadingIcon string | object

Display an icon on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

trailingIcon string | object

Display an icon on the right side.

loadingboolean

When true, the loading icon will be displayed.

loadingIconappConfig.pohon.icons.loading string | object

The icon when the loading prop is true.

pohon { root?: ClassValue; base?: ClassValue; leading?: ClassValue; leadingIcon?: ClassValue; leadingAvatar?: ClassValue; leadingAvatarSize?: ClassValue; trailing?: ClassValue; trailingIcon?: ClassValue; segment?: ClassValue; }

Slots

Slot Type
leading{ pohon: object; }
default{ pohon: object; }
trailing{ pohon: object; }

Emits

Event Type
blur[event: FocusEvent]
change[event: Event]
focus[event: FocusEvent]
update:modelValue[date: TimeValue | undefined]
update:placeholder[date: TimeValue]

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PInputTime. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    inputTime: {
      slots: {
        root: '',
        base: '',
        leading: '',
        leadingIcon: '',
        leadingAvatar: '',
        leadingAvatarSize: '',
        trailing: '',
        trailingIcon: '',
        segment: ''
      },
      variants: {
        fieldGroup: {
          horizontal: '',
          vertical: ''
        },
        size: {
          xs: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          },
          sm: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          },
          md: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          },
          lg: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          },
          xl: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          }
        },
        variant: {
          outline: '',
          soft: '',
          subtle: '',
          ghost: '',
          none: ''
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        type: {
          file: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    inputTime: {
      slots: {
        root: '',
        base: '',
        leading: '',
        leadingIcon: '',
        leadingAvatar: '',
        leadingAvatarSize: '',
        trailing: '',
        trailingIcon: '',
        segment: ''
      },
      variants: {
        fieldGroup: {
          horizontal: '',
          vertical: ''
        },
        size: {
          xs: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          },
          sm: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          },
          md: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          },
          lg: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          },
          xl: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: '',
            segment: ''
          }
        },
        variant: {
          outline: '',
          soft: '',
          subtle: '',
          ghost: '',
          none: ''
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        type: {
          file: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
};

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

InputTags

An input element that displays interactive tags.

PinInput

A sequence of one-character alphanumeric inputs.