Date picker

Selects a date from a calendar overlay opened by a 1px trigger.

Preview

In action

When

Press day

Issue 03 goes on the cylinder. Pick the morning.

When to use

Use it for

A date field in a form where the calendar should stay out of the way until asked.
format to render the chosen date your way.

Not for

Dates the user knows by heart; use Input type="date".
Always-visible calendars; use Calendar.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { DatePicker } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/date-picker.

2. Vendor the source

npx @noorddev/vlak-cli add date-picker

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/date-picker.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useState } from "react";
import { DatePicker } from "@noorddev/vlak-react";

const [date, setDate] = useState<Date>();

<DatePicker value={date} onValueChange={setDate} placeholder="Pick a date" dialogLabel="Choose a date" />

Props

DatePicker

Hairline trigger that opens a calendar in a non-modal dialog. Focus moves to the selected (or today's) day; Escape, Tab out, and a click outside close it; focus returns to the trigger.

Prop	Type	Default	Description
`value`	`Date`
`defaultValue`	`Date`
`onValueChange`	`(date: Date) => void`
`onChange`	`(date: Date) => void`		Deprecated. Use `onValueChange`.
`placeholder`	`string`	`"Pick a date"`
`format`	`(date: Date) => string`	`defaultDateFormat`
`disabled`	`boolean`
`dialogLabel`	`string`	`"Choose a date"`	Accessible name of the calendar dialog.

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">.

Keyboard

Keys	Does
`Enter, Space, Arrow down`	Opens the calendar
`Arrow keys, Home, End, Page up, Page down`	Move through the calendar
`Enter, Space`	Selects the day and closes
`Escape`	Closes and returns focus to the trigger
`Tab`	Leaves the calendar and closes it

Accessibility

The trigger is a <button> with aria-haspopup="dialog", aria-expanded, and aria-controls; the calendar sits in a non-modal role="dialog" named by dialogLabel.
On open, focus moves to the selected day or today; on close it returns to the trigger.
Controlled with value and onValueChange, or uncontrolled with defaultValue.

Markup

<button class="rs-dropdown"><span>24 July 2026</span></button>

Classes

.rs-date-picker-cal-menu

Depends on

/dropdown-menu /calendar