Forms

Date picker.

A date field with a calendar, clear action and useful feedback.

LIVE PREVIEWTry it. It works.

Review date

Dates before 5 October are unavailable.

Locked review date

Choose a review date.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/date-picker.json

Registry setup · Open the playground

Usage

<DatePicker label="Review date" name="reviewDate"
  value={date} onValueChange={setDate}
  hint="Choose the next review." />

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Controlled value/onValueChange or uncontrolled defaultValue (Date or null). Opens a Base UI Popover with the shared Calendar. Selection closes and restores trigger focus; null clears the date. minDate/maxDate, disabled, hint/error, formatLocale and calendar locale are supported. name emits a hidden YYYY-MM-DD date-only input. Validate required dates in your application; hidden fields do not have native required validation.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.