Storybook
SketchExamples
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
| Name | Type | Default | Description |
|---|---|---|---|
namerequired | string | The input field's name attribute | |
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: 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 | |
errorPlacement | "top" | "bottom" | Location of the error message relative to the field input | |
id | string | A unique id for the field element. Useful for referencing the field from
other components with aria-describedby. | |
labelrequired | ReactNode | Label for the field. | |
labelClassName | string | Additional classes to be added to the field label | |
labelId | string | A unique id to be used on the field label. If one isn't provided, a unique ID
will be generated. | |
errorMessage | ReactNode | Enable the error state by providing an error message. | |
errorMessageClassName | string | Additional classes to be added to the error message | |
errorId | string | The ID of the error message applied to this field. | |
hint | ReactNode | Additional hint text to display | |
inversed | boolean | Set to true to apply the "inverse" theme | |
requirementLabel | ReactNode | Text showing the requirement (ie. "Optional", or "Required"). In most cases, this should be used to indicate which fields are optional. See the form guidelines for more info. | |
textClassName | string | Additional classes to be added to the label text. |
Styles
The following CSS variables can be overridden to customize MonthPicker fields:
Form components
This component also makes use of form field styles, which can be customized by the following variables:
Component maturity
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.