CMS Design System

`<MonthPicker>`

The MonthPicker component renders a grid of checkboxes with shortened month names as well as buttons for selecting or deselecting all. For internationalization one can pass a locale prop, and the month names will change to match the language of the locale. Full month names are also included as aria-label attributes.

View Source File

Open in Storybook

Code snippet

Props

React Properties Documentation
Name	Type	Description
`name`required	`string`	The `input` field's `name` attribute
`locale`	`string`
`className`	`string`	Additional classes to be added to the root element.
`buttonVariation`	`ButtonVariation`	Variation string to be applied to buttons. See Button component
`disabledMonths`	`number[]`	Array of month numbers, where `1` is January, and any month included is disabled for selection.
`selectedMonths`	`number[]`	Array of month numbers, where `1` is January, and any month included is selected. This will render a read-only field. If the field should be mutable, use `defaultSelectedMonths`.
`defaultSelectedMonths`	`number[]`	Array of month numbers, where `1` is January, and any month included is selected by default. Sets the initial checked state for the 12 month checkboxes. Use this for an uncontrolled component; otherwise, use the `selectedMonths` property.
`onChange`	`(event: React.ChangeEvent<HTMLInputElement>) => any`	A callback function that's invoked when a month's checked state is changed. Note: This callback is not called when a month is selected or deselected via the "Select all" or "Clear all" buttons – use the `onSelectAll` and `onClearAll` event handlers for those instances.
`onSelectAll`	`() => any`
`onClearAll`	`() => any`
`selectAllText`	`string`	The text for the "Select all" button for internationalization
`clearAllText`	`string`	The text for the "Clear all" button for internationalization