Date Field

Installation

npx shadcn@latest add @preskok/date-field

Usage

import { parseDate } from "@internationalized/date"

import { DateField } from "@/components/ui/preskok-ui/date-field"

export function Example() {
  return (
    <DateField
      label="Date"
      granularity="day"
      defaultValue={parseDate("2024-02-10")}
    />
  )
}

Props

• label: string — Optional label text.
• description: string — Optional help text.
• errorMessage: string | (validation) => string — Error text.
• prefix/suffix: ReactNode — Inline adornments.
• Plus all react-aria-components DateField props.

Features

• Segmented input with keyboard affordances
• Validation states and error messaging
• Prefix/Suffix adornments
• Accessible by default