Date Field [react-aria-components]

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Date Field [react-aria-components] to your project and fits it to your theme.

import { DateField, DateInput } from "@/components/ui/datefield"
import { Label } from "@/components/ui/field"

export function DateFieldDemo() {
  return (
    <DateField className={"min-w-[150px] space-y-1"}>
      <Label>Birth date</Label>
      <DateInput />
    </DateField>
  )
}