Skip to content
v2.5.0
English
Русский
Documentation

MonthPicker

MonthPicker is the grid-based month-selection subsystem used directly or as part of the calendar family.

Labeling

  • The surrounding UI should explain what year or broader period the month grid applies to.

Keyboard Behavior

AnnouncementFocus the demo and press a key from the table.
KeyAction
←→Moves the focus to the previous or next month, wrapping to the neighbouring row. In RTL the arrows are mirrored: ← moves to the next month.
↑↓Moves the focus to the month above or below in the same column.
HomeEndMoves the focus to the first or last month of the row.
Page UpPage DownCtrl + HomeCtrl + EndPage Up and Page Down move the focus to the first or last row in the same column; Ctrl + Home and Ctrl + End to the first or last month.
EnterSpaceSelects the focused month.
Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.
  • Keyboard behavior is inherited from DataGridPicker and the month-item grid primitives.

Focus Behavior

  • Without defaultActive, the tab stop is the current month when it is in the visible year, otherwise the first selected month in it, otherwise its first month
  • Focus should remain visible on the current month item, including custom layouts.

Screen Reader Semantics

  • Month labels should be localized consistently with the rest of the app.

Form Semantics

  • MonthPicker is a picker subsystem, not native form input.

Accessibility Risks

  • hardcoded locale-specific labels
  • custom layouts that obscure active, selected, or disabled state