Description

Range selector allows the user to set a customized range of dates with or without hours in a unified component.

Usage & Behaviour

General guidelines

Structure

The input field is composed of a string indicating the range (start - end) and an icon. Next to the field a label would be set.

The menu is composed of calendar months horizontally displayed. From left (start) to right (end). The direction might change according to RTL languages

Beneath each of the calendar months, a manual input field is displayed. The field also displays the selected dates from the calendar months

Content

Usually used with a label “Date range”.

Internal Logic

#the months are always coupled which means the user always sees 2 consecutive months. For example, if the user chooses to see the Januar 2020 on the End month (right side), the left side will show December 2019.

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

Interaction

<<for example, how to change value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Transitions

<<Used to describe transitions or animations the occurs in any of the interaction stages>>

Best practices

<<e.g. Slider should display a label its on>>

Accessibility compliance

<<In general each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in Keyboard & Focus Management Guidelines >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design