Time field

Accepts a time, with one editable segment for each part.

Meeting time

930AM

time-field-demo.tsx

"use client";import { Time } from "@internationalized/date";import { TimeField } from "@/components/vip-ui/time-field";export function TimeFieldDemo() {  return (    <TimeField      label="Meeting time"      defaultValue={new Time(9, 30)}      className="w-full max-w-xs"    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-time-field.json

24-hour clock

Departure time

1845

time-field-24-hour-demo.tsx

"use client";import { Time } from "@internationalized/date";import { TimeField } from "@/components/vip-ui/time-field";export function TimeField24HourDemo() {  return (    <TimeField      label="Departure time"      hourCycle={24}      defaultValue={new Time(18, 45)}      className="w-full max-w-xs"    />  );}

Minimum and maximum

A time outside the limits shows an error when the field loses focus.

Call time

1000AM

Choose a time from 9:00 AM to 5:00 PM.

time-field-limits-demo.tsx

"use client";import { Time } from "@internationalized/date";import { TimeField } from "@/components/vip-ui/time-field";export function TimeFieldLimitsDemo() {  return (    <TimeField      label="Call time"      description="Choose a time from 9:00 AM to 5:00 PM."      defaultValue={new Time(10, 0)}      minValue={new Time(9, 0)}      maxValue={new Time(17, 0)}      className="w-full max-w-xs"    />  );}

Disabled

Reminder time

800AM

time-field-disabled-demo.tsx

"use client";import { Time } from "@internationalized/date";import { TimeField } from "@/components/vip-ui/time-field";export function TimeFieldDisabledDemo() {  return (    <TimeField      label="Reminder time"      defaultValue={new Time(8, 0)}      isDisabled      className="w-full max-w-xs"    />  );}

Sizes

930AM

time-field-sizes-demo.tsx

"use client";import { Time } from "@internationalized/date";import { TimeField } from "@/components/vip-ui/time-field";export function TimeFieldSizesDemo() {  return (    <div className="grid w-full max-w-xs gap-3">      <TimeField        size="xs"        aria-label="Meeting time"        defaultValue={new Time(9, 30)}      />      <TimeField        size="sm"        aria-label="Meeting time"        defaultValue={new Time(9, 30)}      />      <TimeField        size="md"        aria-label="Meeting time"        defaultValue={new Time(9, 30)}      />      <TimeField aria-label="Meeting time" defaultValue={new Time(9, 30)} />    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria TimeField (opens in a new tab).

size: "xs" | "sm" | "md" | "lg" | "xl" = "lg": Sets the size of the field.
label: string: Label above the field. Without a label, pass aria-label.
description: string: Help text below the field.