Skip to main content
U.S. Flag

An official website of the United States government

Month Picker

Examples

The Month Picker 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.

Loading

Code

React

React Properties Documentation
NameTypeDefaultDescription
namerequiredstring

The input field's name attribute

localestring
classNamestring

Additional classes to be added to the root element.

buttonVariationButtonVariation

Variation string to be applied to buttons. See Button component

disabledMonthsnumber[]

Array of month numbers, where 1 is January, and any month included is disabled for selection.

selectedMonthsnumber[]

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.

defaultSelectedMonthsnumber[]

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
selectAllTextstring

The text for the "Select all" button for internationalization

clearAllTextstring

The text for the "Clear all" button for internationalization

Styles

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

Sass variables for choice
VariableDefault 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-radius0px
$choice__border-width2px
$choice__color--unchecked$color-white
$choice__color--disabled$color-gray
$choice__size32px
$choice__size--small20px
$choice__size-radio22px
$choice__size-radio--small12px
$choice-label__color--disabled$color-gray
$choice-label__color--disabled--inverse$color-muted-inverse

Form components

This component also makes use of form field styles, which can be customized by the following variables:

Sass variables for form
VariableDefault Core Theme Value
$form-label__color--inverse$color-white
$form__max-width460px
$form__max-width--small6em
$form__max-width--medium12em
$form-hint__color$color-gray
$form-hint__color--inverse$color-muted-inverse
$form-error__color$color-error
$form-error__color--inverse$color-error-light