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

Customization

The following Sass variables can be overridden to customize MonthPicker fields:

Variable	Default Core Theme Value
`$choice__background-color`	`$color-white`
`$choice__background-color--checked`	`$color-primary`
`$choice__background-color--disabled`	`$color-border`
`$choice__background-color--inverse`	`$color-transparent`
`$choice__background-color--disabled--inverse`	`#e9ecf126`
`$choice__border-color`	`$color-base`
`$choice__border-color--checked`	`$color-primary`
`$choice__border-color--disabled`	`$color-gray-light`
`$choice__border-color--error`	`$color-error`
`$choice__border-color--inverse`	`$color-white`
`$choice__border-color--left`	`$color-primary`
`$choice__border-color--focus`	`$color-primary-darker`
`$choice__border-color--disabled--inverse`	`$color-gray-light`
`$choice__border-radius`	`0px`
`$choice__border-width`	`2px`
`$choice__color--unchecked`	`$color-white`
`$choice__color--disabled`	`$color-gray`
`$choice__size`	`32px`
`$choice__size--small`	`20px`
`$choice__size-radio`	`22px`
`$choice__size-radio--small`	`12px`
`$choice-label__color--disabled`	`$color-gray`
`$choice-label__color--disabled--inverse`	`$color-muted-inverse`

Form components

Variable	Default Core Theme Value
`$form-label__color--inverse`	`$color-white`
`$form__max-width`	`460px`
`$form__max-width--small`	`6em`
`$form__max-width--medium`	`12em`
`$form-hint__color`	`$color-gray`
`$form-hint__color--inverse`	`$color-muted-inverse`
`$form-error__color`	`$color-error`
`$form-error__color--inverse`	`$color-error-light`