Components
Date Picker
Pick a calendar date — optional time — from a popover, not a native date input.
You might be looking for:
- Input
Single-line text entry.
- Textarea
Multi-line text entry.
- Number Input
Enter an amount — raw or formatted.
Playground
<DatePicker />Examples
Inside a Field
The trigger matches other Field controls — the card carries the frame.
With time
A time input sits beside the date trigger.
Usage
import { DatePicker } from "@sophic/portal-ui/components/ui/date-picker";<DatePicker value={value} onChange={setValue} />In forms, nest Date Picker inside Field. The
value is a Date (UTC). Pass showTime when the same control should
edit hours and minutes.
Props
Prop
Type
Default
Changelog
- 3 October 2026 — Dark trigger fill tracks Field (one step above the card). Full notes
- 8 September 2026 — Trigger corners use 16px (
--radius-2xl) on product tokens. Full notes - 20 August 2026 — Trigger matches Input / Select height and chrome. Full notes
- 20 August 2026 — Docs page added (was in the library undocumented). Full notes
- 20 August 2026 — Chrome in a CSS module; look unchanged. Full notes