Skip to content
Components

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 "@instruments/materia-ui/components/month-year-picker";

Best practices

  • value is a union - a Date, "beyond", or "unsure" - so branch on the string sentinels in onChange before 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

PropTypeDefaultDescription
beyondLabelstring

Label for "beyond" option. Default: "Beyond {lastYear}"

classNamestring
monthLabelstring

Month section label. Default: "Choose month"

onChange(value: MonthYearPickerValue) => void

Called when selection is committed (auto-advances when both month and year selected)

showUnsureboolean

Show "I'm not sure" option. Default: false

sizeToggleSize

Toggle size. Default: "lg"

unsureLabelstring

Label for "unsure" option. Default: "I'm not sure"

valueMonthYearPickerValue | null

Current value

variantToggleVariant

Toggle variant. Default: "default"

yearLabelstring

Year section label. Default: "Choose year"

yearsAheadnumber

Number of years to show from current year. Default: 10

Also exports

  • interfaceMonthYearPickerProps
  • typeMonthYearPickerValue

Composition

Builds on

Flex, Grid, Text, Toggle