An official website of the United States government
Official websites use .gov A .gov website belongs to an official government organization in the United States.
Secure .gov websites use HTTPS A lock or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
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
Name
Type
Default
Description
namerequired
string
The input field's name attribute
locale
string
className
string
Additional classes to be added to the root element.
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
Styles
The following Sass variables can be overridden to customize MonthPicker fields:
Sass variables for choice
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
This component also makes use of form field styles, which can be customized by the following variables:
Storybook
Sketch