Skip to main content

Year picker

Year picker in Storybook

Usage​

Overview​

Year picker is a control element where the user selects a specific year from a calendar or enters it manually. This component is commonly used in insurance applications where users need to specify a year, such as the year they suffered a loss covered by their homeowners insurance.

When to use​

When the user needs to select a year.

When not to use​

  • When the user needs to enter a year that's in the distant past or future. In this case, use the date input.
  • When the user needs to select the month, day, and year. In this case, use the date picker.
  • When the user needs to select both a month and a year. In this case, use the month picker.

Formatting​

Anatomy​

Image depicting the anatomy of the year picker component

The year picker component consists of the following elements:

  1. Date picker field: An input field where the user can manually enter the year.
  2. Calendar icon: An icon button that triggers the dropdown calendar when clicked.
  3. Previous year button: A navigational control for viewing and selecting from an earlier set of years within the picker's range.
  4. Next year button: A navigational control for viewing and selecting from a later set of years within the picker's range.
  5. Selected year: The specific year chosen by the user and highlighted or emphasized within the year picker interface.
  6. “Current year” button: A button that automatically populates the year picker field with the current year when clicked.

Date format​

A YYYY placeholder within the input field guides users on the expected year format as they type.

Image that shows a user typing in the date picker field

Content​

General writing guidelines​

  • Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
  • Use present tense verbs and active voice in most situations.
  • Use common contractions to lend your copy a more natural and informal tone.
  • Use plain language. Avoid unnecessary jargon and complex language.
  • Keep words and sentences short.

Include a label​

Label the year picker with clear, descriptive text. This label must communicate its purpose and the specific type of year being selected.

Do position a permanent label outside the field.
Don't use placeholder text as replacement for label.

Add help text if it's meaningful​

Use help text to provide context and communicate what year to select. Here are some examples of what you might include:

  • Hints that assist the user in choosing the appropriate year
  • More context for why the user needs to select a specific year

Only use help text for pertinent information. Avoid restating the same details that appear in the label. Write help text in sentence case, using 1-2 short, complete sentences that end with a period.

Do use help text to show context.
Don't use help text to simply restate the same information that appears in the label.

Behaviors​

States​

The year picker component behaves like an input field, with the same interactive states.

Interactions​

Mouse​

Users can enter the year manually in the year picker field or click the calendar icon to select the year from a dropdown.

Image that shows a user interacting with the year picker using a mouse

Keyboard​

The date picker is expanded and collapsed with Spacebar. Users navigate through the options using the arrow keys and select by means of the Spacebar or Enter key.

A calendar widget appears when the user tabs to the datepicker input field. The current date is highlighted and keyboard-only users can enter the date manually here. Users can also place keyboard focus on the widget by pressing the down arrow key when it is expanded. Navigate through the calendar with the arrow keys. 'Previous', 'Month', 'Year', and 'Next' buttons are focusable using the Tab key when the widget is open.

Screenreader​

Users are informed of the pre-populated date value when they tab to the datepicker input field, and that this value is currently selected. The date can be entered manually from this input field. While focus remains on the pre-populated date, a calendar widget is also available. Users can also move focus into the widget by pressing the down arrow key. Navigation through the calendar portion of the widget is accomplished using the arrow keys, and the value currently in focus is voiced by screen readers through a WAI-ARIA aria-label attribute. The 'Previous', 'Month', 'Year', and 'Next' buttons are focusable using the Tab key when the widget is open. React datepicker does not currently enable keyboard navigation to the 'Today' link.

Input handling​

The year picker component doesn't allow users to control the caret (the blinking text cursor) in a way that allows for partial deletion of the value. Users can click within the field to move the caret, but deleting any digit erases the entire value, requiring users to retype the year from the beginning. This behavior is consistent across date components, where the input mask formats the input as the user types.

Accessibility​

The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.

When using this component, ensure the label clearly communicates which year the user needs to input or select.