Docs
Components
Date Field

Date Field

A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.

Docs

Preview

Code

Event date

mmddyyyy

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/date-field

Anatomy

Single import

Multiple imports

import { DateField } from "~/components/ui/date-field";

<DateField.Root>
  <Label />
  <DateField.Input>
    {(segment) => <DateField.Segment segment={segment} />}
  </DateField.Input>
</DateField.Root>;