Date field

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

Delivery date

6152026

date-field-demo.tsx

"use client";import { parseDate } from "@internationalized/date";import { DateField } from "@/components/vip-ui/date-field";export function DateFieldDemo() {  return (    <DateField      label="Delivery date"      defaultValue={parseDate("2026-06-15")}      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-date-field.json

Minimum and maximum

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

Delivery date

6152026

Choose a date in June 2026.

date-field-limits-demo.tsx

"use client";import { parseDate } from "@internationalized/date";import { DateField } from "@/components/vip-ui/date-field";export function DateFieldLimitsDemo() {  return (    <DateField      label="Delivery date"      description="Choose a date in June 2026."      defaultValue={parseDate("2026-06-15")}      minValue={parseDate("2026-06-01")}      maxValue={parseDate("2026-06-30")}      className="w-full max-w-xs"    />  );}

Date and time

Pass a CalendarDateTime to add time segments. Set granularity to change the smallest one.

Event start

6152026930AM

date-field-time-demo.tsx

"use client";import { parseDateTime } from "@internationalized/date";import { DateField } from "@/components/vip-ui/date-field";export function DateFieldTimeDemo() {  return (    <DateField      label="Event start"      defaultValue={parseDateTime("2026-06-15T09:30")}      className="w-full max-w-xs"    />  );}

Disabled

Start date

612026

date-field-disabled-demo.tsx

"use client";import { parseDate } from "@internationalized/date";import { DateField } from "@/components/vip-ui/date-field";export function DateFieldDisabledDemo() {  return (    <DateField      label="Start date"      defaultValue={parseDate("2026-06-01")}      isDisabled      className="w-full max-w-xs"    />  );}

Sizes

6152026

date-field-sizes-demo.tsx

"use client";import { parseDate } from "@internationalized/date";import { DateField } from "@/components/vip-ui/date-field";export function DateFieldSizesDemo() {  return (    <div className="grid w-full max-w-xs gap-3">      <DateField        size="xs"        aria-label="Delivery date"        defaultValue={parseDate("2026-06-15")}      />      <DateField        size="sm"        aria-label="Delivery date"        defaultValue={parseDate("2026-06-15")}      />      <DateField        size="md"        aria-label="Delivery date"        defaultValue={parseDate("2026-06-15")}      />      <DateField        aria-label="Delivery date"        defaultValue={parseDate("2026-06-15")}      />    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria DateField (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.