Prepared Docs

Overview

DateInput is a Prepared-styled field (@prepared911/ui-core Input) wrapped in a Popover that opens a DatePicker. The field and popover manage the usual input / trigger a11y; the underlying grid ships react-day-picker's semantics. The app owns the visible label, the short tooltip copy when showTooltip is enabled, and any Apply-time announcement of the committed value.

What the component handles

Field label and placeholder. The Input reads id + label and creates a labeled input. placeholder is styling, not a name.
Popover affordances. The Popover sets aria-expanded on the trigger, opens on focus / click, and closes on Escape or outside click with focus returned to the trigger.
Calendar grid semantics. react-day-picker roles carry through (role="grid", arrow-key navigation, aria-selected, aria-disabled).
Tooltip (opt-in). When showTooltip is true, hovering the field renders a short tooltip with the formatted value. The tooltip is opened via @prepared911/ui-core Tooltip which uses Radix semantics.
Apply / Reset (cta). @prepared911/ui-core Buttons: focusable, activatable by Enter / Space.

What you must provide

Label. Always pass label, or pair id with an external Label. Placeholder text is not an accessible name.
Trigger focus return. The default Popover behavior returns focus to the field on Escape or outside click. When a programmatic onApply closes the popover, restore focus yourself (see Focus management).
Committed-value echo. Apply does not announce the committed value. Show it in the field (which updates automatically from the internal draft), in a nearby summary line, or in a polite live region.
Tooltip brevity. When showTooltip is enabled, keep tooltip text short: it is not a label substitute.

Keyboard behavior

Tab / Shift+Tab moves to and from the field. Focusing the field opens the popover.
Enter / Space on a focused trigger activates the popover (when the field hosts a tailIconButton).
Arrow keys inside the grid match DatePicker (Up / Down by week, Left / Right by day, Home / End within a week).
Escape closes the popover and returns focus to the field.
Enter on Apply / Reset (when cta) activates the button.

Semantics and roles

Field. <input> via @prepared911/ui-core Input; the associated Label provides the accessible name.
Trigger element (tailIconButton, when provided). @prepared911/ui-core IconButton with a required title / aria-label.
Popover. Radix Popover wraps the calendar content; the trigger exposes aria-expanded.
Grid. role="grid" from react-day-picker.

Focus management

DateInput opens the popover on field focus and restores focus on Escape. Programmatic closes after Apply need a deliberate restore—otherwise keyboard operators land at the document root.

Known caveats

Field focus opens the popover. If your surface uses DateInput inside another overlay with its own focus management (a Drawer, Modal), coordinate onOpenChange so the overlay doesn't close when the date popover does.
Tooltip duplicates the field value. Don't rely on it as the only label; it's a readability aid for truncation, not a name.
Committed value isn't announced automatically. Pair Apply with a visible echo or a polite live region.

Date Input / API and Development

Date Picker / Usage

Overview

What the component handles

What you must provide

Overview

What the component handles

Field label and placeholder. The Input reads id + label and creates a labeled input. placeholder is styling, not a name.
Popover affordances. The Popover sets aria-expanded on the trigger, opens on focus / click, and closes on Escape or outside click with focus returned to the trigger.
Calendar grid semantics. react-day-picker roles carry through (role="grid", arrow-key navigation, aria-selected, aria-disabled).
Tooltip (opt-in). When showTooltip is true, hovering the field renders a short tooltip with the formatted value. The tooltip is opened via @prepared911/ui-core Tooltip which uses Radix semantics.
Apply / Reset (cta). @prepared911/ui-core Buttons: focusable, activatable by Enter / Space.

What you must provide

Label. Always pass label, or pair id with an external Label. Placeholder text is not an accessible name.
Trigger focus return. The default Popover behavior returns focus to the field on Escape or outside click. When a programmatic onApply closes the popover, restore focus yourself (see Focus management).
Committed-value echo. Apply does not announce the committed value. Show it in the field (which updates automatically from the internal draft), in a nearby summary line, or in a polite live region.
Tooltip brevity. When showTooltip is enabled, keep tooltip text short: it is not a label substitute.

Keyboard behavior

Tab / Shift+Tab moves to and from the field. Focusing the field opens the popover.
Enter / Space on a focused trigger activates the popover (when the field hosts a tailIconButton).
Arrow keys inside the grid match DatePicker (Up / Down by week, Left / Right by day, Home / End within a week).
Escape closes the popover and returns focus to the field.
Enter on Apply / Reset (when cta) activates the button.

Semantics and roles

Field. <input> via @prepared911/ui-core Input; the associated Label provides the accessible name.
Trigger element (tailIconButton, when provided). @prepared911/ui-core IconButton with a required title / aria-label.
Popover. Radix Popover wraps the calendar content; the trigger exposes aria-expanded.
Grid. role="grid" from react-day-picker.

Focus management

DateInput opens the popover on field focus and restores focus on Escape. Programmatic closes after Apply need a deliberate restore—otherwise keyboard operators land at the document root.

Known caveats

Field focus opens the popover. If your surface uses DateInput inside another overlay with its own focus management (a Drawer, Modal), coordinate onOpenChange so the overlay doesn't close when the date popover does.
Tooltip duplicates the field value. Don't rely on it as the only label; it's a readability aid for truncation, not a name.
Committed value isn't announced automatically. Pair Apply with a visible echo or a polite live region.

Date Input / API and Development

Date Picker / Usage

Overview

What the component handles

What you must provide