Skip to content
Holm Digital logotyp

Date Picker

A component used to select a single date from a calendar view. Features full keyboard accessibility and screen reader support.

Date pickers are often a huge accessibility hurdle. Our component focuses on making the calendar grid perfectly navigable by keyboard.

Accessibility Features

  • Grid Navigation: Standard calendar grid navigation (Arrows to change days, PgUp/PgDn for months).
  • Focus Modal: The calendar popup acts as a focus trap to ensure keyboard users don't "leak" into the background.
  • Dynamic Labels: Announces selected date and focused date clearly (e.g., "Monday, February 2nd").

Usage Example

import { DatePicker } from '@holmdigital/components'; <DatePicker onSelect={(date) => console.log(date)} label="Select appointment date" />
Next →Introduction