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.

Accessibility

Accessibility

• Be mindful of color contrast ratios between the checkbox and its background color. For instance, a dark green or blue behind the component will most likely cause problems for users. When using a dark background, consider using the inversed prop. Read our guidance on color for more information.

Accessibility testing

Keyboard testing

• All checkboxes can be accessed using only the tab key.
• The checkbox focus follows logical content order. When you tab through the months with a keyboard, the focus stays in order of the content as intended.
• The spacebar is used to check/uncheck a focused checkbox.
• There is a visible focus state.
• The change in state is visible.

Screen reader testing

For desktop users:

• Some screen readers read the legend text for each element within the fieldset, so it should be brief and descriptive.
• Each label should be announced for every checkbox.
• The checkbox element should be identified with a role of checkbox.
• If hints or errors are present, they are read after the label.
• In a checkbox group, I should hear the question or title related to them via a legend inside a fieldset.
• When the checkbox is selected, that state is read out.

For mobile users:

• All the above from the desktop screen reader experience apply.
• Swiping focuses on a checkbox.
• Double tapping with the checkbox in focus makes a selection and announces its been selected.
• Users may select either the text label or the checkbox itself to select an option.
• Click/tap target area is a minimum of 24x24px.

Code

React

Review Storybook for React guidance of this component.

Web Component

Go to Storybook for Web Component guidance of this component.

Style customization

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