Form

Date Picker

A date form field: a TextInput-style trigger showing the date that opens a Calendar in a popover. Clearable, with min / max.

Date Menu (database property menu)

Reminders go out the day before.

Usage

  • Use for a single date in a form (due date, start date, birthday).
  • Use DateRangePicker for periods and Calendar for an always-visible month.
  • Use Date Menu inside database date properties (it adds end date, time and reminders).

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/DatePickerExample.tsx
import { useState } from 'react';
import { DatePicker, Field } from '@krackedui/motion';

export function DueDateField() {
  const [due, setDue] = useState<Date | null>(new Date(2026, 9, 30));
  return (
    <Field label="Due date" description="Reminders go out the day before.">
      <DatePicker value={due} onValueChange={setDue} />
    </Field>
  );
}

Examples

Placeholder, min and max

Within the next 30 days.

Custom format

Sizes and states

Pick the date on the invoice.

Dark theme

API Reference

DatePicker

The ref goes to the trigger <button>.

PropTypeDefault
value / defaultValue
Date | null
onValueChange
(value: Date | null) => void
placeholder
string
"Pick a date"
min / max
Date
size
"sm""md""lg"
"md"
clearable
boolean
true
formatValue
(date: Date) => string
"Oct 21, 2026"
locale
string
"en-US"
weekStartsOn
01
0
today
Date
new Date()
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
invalid
boolean
false
disabled
boolean
false
required
boolean
false
name
string
id
string
className
string
style
CSSProperties
aria-label
string
aria-describedby
string

Accessibility

  • The trigger is a button with aria-haspopup="dialog" and aria-expanded, named by the Field label plus the current date.
  • Opening moves focus to the selected day (or today) in the calendar grid; all Calendar keys apply. Enter picks and closes; Escape closes. Focus returns to the trigger.
  • The popover is a dialog named "Choose date". The clear button is labelled "Clear date" and returns focus to the trigger.
© 2026 Motion. Internal documentation.