All components
Forms
DatePicker
beta
Since 1.1
Compact date field that opens a Calendar in a portalled overlay; commits on selection.
Forms
primitive
Display
Documented
import { DatePicker } from '@ivim/native/components';
When to use
Use when
You need a single date in a form without spending the vertical space of an inline calendar.
The date sits alongside other fields and should read as a field.
Don't use when
The calendar should always be visible (e.g. a scheduling surface) — use Calendar inline.
Example
Preview
Code
Guidelines
Do
Pass minValue/maxValue through to constrain the popover Calendar to valid dates.
Don't
Don't nest a DatePicker inside a scroll container expecting the popup to clip — it portals via Modal on purpose.
Accessibility
Roles and screen-reader behavior this component provides, plus keyboard interactions.
•
Trigger is a button exposing aria-expanded; the popover contains the accessible Calendar.
•
Selecting a day commits the value and closes the overlay.
Enter / Space
Opens the calendar popover from the field.
Arrow keys / Enter
Navigate and select within the open calendar.
Platform & RTL
Behavior that differs across the platforms this component runs on.
Web
Popover portals above content; backdrop press dismisses.
iOS
Presents the calendar in a modal sheet region.
Android
Hardware back closes the popover (onRequestClose).
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.
Related components
Components that solve adjacent problems or compose with this one.
Calendar
Month-grid date selection with keyboard navigation, min/max range, and today/selected states.
Select
Single-choice picker with sections, rich items, a searchable combo-box mode, and a popover-on-web / sheet-on-native overlay.
Input
Single-line text entry, with TextField for labelled fields and InputGroup for adornments, prefixes, and attached controls.