MonthPicker

MonthPicker renders a 3×4 grid of months with previous/next year navigation. Use it for surfaces where day-level precision isn't needed — month-only filters, billing periods, or report ranges.

#Default usage

<MonthPicker aria-label="Reporting month" defaultValue="2026-05" />

#Import

import { MonthPicker } from "@froggdesign/enter-ui-react";

#Accessibility

MonthPicker is a role="group" containing button cells. Each cell uses aria-pressed so screen readers announce the selected month. Year navigation buttons have explicit aria-labels.

#API

• value / defaultValue: ISO YYYY-MM string.
• onValueChange(value): fires when a month is committed.
• min / max: optional ISO bounds.
• locale: BCP 47 locale for short month labels.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.