Components

Month Picker

A field showing a month that opens a year and a 12-month grid, with optional limits and clearing.

Import

import { MonthPicker } from '@rinzai/zen';

Examples

Range

A start and an optional end: the end can't come before the start, and can be cleared.

StartsEnds

API reference

<MonthPicker>

Month selector: a field showing "Sep 2026" that opens a year and a 12-month grid. Months are "YYYY-MM" strings. When clearable, the popup also offers clearLabel (e.g. "No end") to empty it. With name, it's submitted with a form.

Prop	Type	Default
`className` Classes for the trigger (e.g. a width, instead of the default full width).	`string`	`—`
`clearable` Offers a clear option in the popup (shown when a month is set); clearing reports null.	`boolean`	`false`
`clearLabel`	`string`	`—`
`defaultValue` The first month, when the picker keeps its own.	`string \| null`	`null`
`disabled`	`boolean`	`false`
`id`	`string`	`—`
`locale` Decides month names and format, e.g. "en-IN". Defaults to the LocaleProvider's.	`string`	`—`
`max` Latest month that can be picked.	`string`	`—`
`min` Earliest month that can be picked ("YYYY-MM").	`string`	`—`
`name` Form field name: the month ("YYYY-MM") is submitted with the form.	`string`	`—`
`onValueChange`	`((month: string \| null) => void)`	`—`
`placeholder`	`string`	`—`
`size` Height, matching Button's: sm (32px), default (40px) or lg (44px).	`"default" \| "lg" \| "sm"`	`default`
`value` "YYYY-MM", or null for none, when you keep it.	`string \| null`	`—`