Custom Components
Date picker
A segmented DD/MM/YYYY field plus a real calendar-icon trigger that opens a Calendar popover. Today is marked in the calendar (bold brand text and a brand ring) and a Today button under it picks it. Not yet part of the design system - documented here until a stakeholder decides where (or whether) it belongs.
What lives in this section
Components built for a specific screen because nothing in components/base/** or components/application/** covers the pattern - real and working, not a ? placeholder, but not yet reviewed or adopted as part of the design system either. Once a stakeholder picks a direction, it moves into components/base (with a real entry in the Components section) - or gets replaced if the direction changes.
Live example
Default
Required, with hint
Min / max value (only today through +90 days selectable)
Invalid
Disabled
Why this is custom, not real DEW
components/base/input/input-date.tsx is a real, already-documented DEW component (see /components/input) - a segmented DD/MM/YYYY DateField, typed entry only, with no calendar popover at all. That's correct for that component's own Figma reference, so it was left untouched rather than changed sitewide. This is a different, additive control for contexts that specifically need a clickable calendar - built on react-aria-components' own DatePicker composition (a DateField plus a trigger Button plus a Calendar popover) and the real DEW Popover (components/base/select/popover.tsx), the same combination components/custom/date-range/date-range-control.tsx already proved out for a date range. The segmented field itself still uses the exact same tokens input-date.tsx does, so the two read as one consistent field language wherever they appear side by side.
API
| Prop | Type | Default |
|---|---|---|
label | string | - |
hint | ReactNode | - |
value / defaultValue | DateValue | null | - |
onChange | (value: DateValue | null) => void | - |
minValue / maxValue | DateValue | - |
isRequired / isInvalid / isDisabled | boolean | - |
hideRequiredIndicator | boolean | - |
className | string | - |
Usage
import { InputDatePicker } from "@/components/custom/date-picker/input-date-picker";
<InputDatePicker label="Start date" isRequired />Where it's used
app/pages/project-registration/** - the 3-step Add Project wizard's Start Date, End Date, and Embargo End Date fields, per direct request that every date field across all three steps be a real date selector, not a type-the-digits-only field.