Usage
import { NativeDatePicker } from "@voila.dev/ui/native-date-picker";Real <input type="date"> elements wearing the kit's field styling. The OS
draws the picker, so on a phone this is the best date input you can ship — a
wheel the user already knows, in their language, with their calendar system.
The trade is control: you cannot disable individual days, mark a range, or
style the popup at all. When you need any of that, use
DatePicker, which draws its own grid; when you want the
native surface on mobile and the drawn one on desktop, DateTimePicker.Responsive
switches between them for you.
The value is an ISO string, not a Date — "2026-06-20" for a date,
"14:30" for a time, "2026-06-20T14:30" for both. That is what the DOM gives,
and it is what a form post sends.
Recipes
Bounded to one month
min and max are the DOM's own attributes and take the same ISO strings.
Browsers grey out the dates outside them, but a value can still arrive from a
query string or a paste — treat these as help, not as validation.
Dense fields
size="sm" matches the compact form controls elsewhere in the kit, for table
cells and toolbars where the default height is too tall.
Clicking anywhere in the field opens the picker, not just the small OS indicator, which is hidden — the whole control is the affordance, the same as the drawn DatePicker.
API
NativeDatePicker.Date
| Prop | Type | Default | |
|---|---|---|---|
size | "default" | "sm" | — | Field height. sm for dense surfaces such as table cells and toolbars. |
wrapperClassName | string | — | Classes for the wrapper <div> that hosts the leading icon. Use this for
layout and width (e.g. w-full, w-48); className styles the inner
<input> itself, matching the rest of the kit's form controls. |
Plus the DOM props of the element it renders. Source: native-date-picker/components/native-date-picker-date.tsx.
NativeDatePicker.DateTime
| Prop | Type | Default | |
|---|---|---|---|
size | "default" | "sm" | — | Field height. sm for dense surfaces such as table cells and toolbars. |
wrapperClassName | string | — | Classes for the wrapper <div> that hosts the leading icon. Use this for
layout and width (e.g. w-full, w-48); className styles the inner
<input> itself, matching the rest of the kit's form controls. |
Plus the DOM props of the element it renders. Source: native-date-picker/components/native-date-picker-date-time.tsx.
NativeDatePicker.Time
| Prop | Type | Default | |
|---|---|---|---|
size | "default" | "sm" | — | Field height. sm for dense surfaces such as table cells and toolbars. |
wrapperClassName | string | — | Classes for the wrapper <div> that hosts the leading icon. Use this for
layout and width (e.g. w-full, w-48); className styles the inner
<input> itself, matching the rest of the kit's form controls. |
Plus the DOM props of the element it renders. Source: native-date-picker/components/native-date-picker-time.tsx.
All three take the rest of the <input> props, so required, name, min and
max behave exactly as they do on a bare element.