MonthYearPicker
MonthYearPicker allows selecting a month and year, or choosing "Beyond" / "I'm not sure". Auto-advances to the next step when both month and year are selected.
Available from
Delivery year
Usage
import { MonthYearPicker, MonthYearPickerProps, MonthYearPickerValue } from "@desk/ui/components/month-year-picker";Best practices
valueis a union — aDate,"beyond", or"unsure"— so branch on the string sentinels inonChangebefore treating it as a date.Enable the "I'm not sure" escape hatch with
showUnsure(off by default);"unsure"/"beyond"only ever arrive when their toggles are shown.Bound the range with
yearsAhead(from the current year); it auto-advances and commits once both month and year are chosen, so don't add your own "next" control.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| beyondLabel | string | Label for "beyond" option. Default: "Beyond {lastYear}" | |
| className | string | ||
| monthLabel | string | Month section label. Default: "Choose Month" | |
| onChange | (value: MonthYearPickerValue) => void | Called when selection is committed (auto-advances when both month and year selected) | |
| showUnsure | boolean | Show "I'm not sure" option. Default: false | |
| size | ToggleSize | Toggle size. Default: "lg" | |
| unsureLabel | string | Label for "unsure" option. Default: "I'm not sure" | |
| value | MonthYearPickerValue | null | Current value | |
| variant | ToggleVariant | Toggle variant. Default: "default" | |
| yearLabel | string | Year section label. Default: "Choose Year" | |
| yearsAhead | number | Number of years to show from current year. Default: 10 |
Also exports
- interface
MonthYearPickerProps - type
MonthYearPickerValue