## Month Picker (S—301)

Pick a month or a month range: a year at a time in a 4 × 3 grid, year arrows, quick presets, and disabled future months.

- URL: https://sundaeui.dev/components/month-picker
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/month-picker.json`
- Tags: date-range, reports, picker, month, calendar, billing-period

Months sit in a grid with the year in the header. In range mode the first tap sets the start and the second the end; hovering previews the span.
Presets cover this quarter, last six months and year to date. Months after the max are disabled.

### Usage

```tsx
import { MonthPicker } from '@/components/sundae/month-picker'

<MonthPicker />
```

### Props

- `mode` (`'single' | 'range'`, default `'range'`): Selection type.
- `max` (`{ y: number; m: number }`): Latest selectable month.
- `onChange` (`(v) => void`): Called on selection.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Reports, billing statements, expiry dates.

### When not to use

- Picking a specific day: use the date picker.

### Accessibility

- Months are a grid of buttons with full month and year names; aria-pressed marks selection.
- Arrow keys move; year buttons are labelled.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Arrow keys: Move between months
- Page Up / Down: Change year