# Date Field (/forms/date-field)





<ComponentPreview name="date-field-demo" description="A segmented date input field with label and error state." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/date-field
```

## Usage [#usage]

```tsx
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 [#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 [#features]

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