Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

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

See Storybook for React guidance of this component.

Style customization

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

CSS variables for choice
VariableDefault Core Theme Value
--choice__background-colorhex value: #ffffff--color-white
--choice__background-color--checkedhex value: #0071bc--color-primary
--choice__background-color--disabledhex value: #d9d9d9--color-border
--choice__background-color--inversehex value: #ffffff00--color-transparent
--choice__background-color--disabled--inverse#e9ecf126
--choice__border-colorhex value: #262626--color-base
--choice__border-color--checkedhex value: #0071bc--color-primary
--choice__border-color--disabledhex value: #a6a6a6--color-gray-light
--choice__border-color--errorhex value: #262626--color-base
--choice__border-color--error--inversehex value: #ffffff--color-white
--choice__border-color--inversehex value: #ffffff--color-white
--choice__border-color--lefthex value: #0071bc--color-primary
--choice__border-color--focushex value: #004f84--color-primary-darker
--choice__border-color--disabled--inversehex value: #a6a6a6--color-gray-light
--choice__border-radius0px
--choice__border-width2px
--choice__color--uncheckedhex value: #ffffff--color-white
--choice__color--disabledhex value: #5a5a5a--color-gray-dark
--choice__size32px
--choice__size--small20px
--choice__size-radio22px
--choice__size-radio--small12px
--choice-label__color--disabledhex value: #5a5a5a--color-gray-dark
--choice-label__color--disabled--inversehex value: #e9ecf1--color-muted-inverse

Form components

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

CSS variables for form
VariableDefault Core Theme Value
--form__max-width460px
--form__max-width--small6em
--form__max-width--medium12em
--form-hint__colorhex value: #5a5a5a--color-gray-dark
--form-hint__color--inversehex value: #e9ecf1--color-muted-inverse
--form-error__colorhex value: #e31c3d--color-error
--form-error__color--inversehex value: #f7bbc5--color-error-lighter

Component maturity

For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.

Accessibility

  • Color

    Meets AA color contrast standards for accessibility and color blindness.
    Complete
  • Forced Colors Mode (FCM)

    While using FCM the components text is legible and improves readability.
    Complete
  • WCAG 2.1 Level AA Conformance

    All Axe checks for WCAG AA compliance have passed.
    Complete
  • Screen readers

    VoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.
    Complete
  • Keyboard navigation

    Component is fully navigable with a keyboard.
    Complete

Code

  • Storybook

    Component has stories to cover all defined props.
    Complete
  • Responsive

    Component designed to work in all responsive breakpoints.
    Complete
  • Spanish translations

    Includes Spanish translations for default text content.
    Complete

Tokens

  • Code

    Tokens implemented in code.
    Complete
  • Design

    Tokens implemented in the Sketch.
    Complete