Skip to main content

Components

Dropdown

allows a user to choose one action from a collection of actions

banner-Dropdown

Anatomy

Dropdown are typically used when you have more than 3 items to choose from with flexile trigger object component. They’re used for navigation or command menus, where an action is initiated based on the selection. Dropdown allows for complex functionality menu items that can’t be accomplished with Select.

date picker anatomy
  1. Calendar icon
  2. Date fields : Displays a user’s selected date. Always fill the date field with a placeholder date format (MM/DD/YYYY) or a pre-selected date before users make their selection via calendar or keyboard. The date field should never be empty.
  3. Selection arrows : Allow users to navigate between months or years.
  4. Calendar : Allows users to select and navigate between days, months, years.
  5. Current date (today’s date) : Indicates the day users access the calendar. Always highlighted.
  6. Hover state
  7. Selected date
  8. Disabled state

Usage

Date pickers allow users to select past, present, or future dates. The kind of date you are requesting from the user will determine which date picker (simple or calendar) is best to use. A time picker helps users select a specific time. You can customize the time picker’s format depending on location or need.

When to use

  • Allowing users to choose a date or date range by clicking through the calendar popup or typing in the text field.
  • Limiting date options to a specific range of dates.

When not to use

  • When the native date picking experience is preferred (typically mobile and web experiences).

Accessibility

A date picker is a component used in UI design to allow users to select a specific date. It typically consists of fields for the day, month, and year, and can be accessed either through typing or a graphical interface. To ensure accessibility, clear labels, keyboard accessibility, ARIA attributes, sufficient color contrast, and clear error messaging should be used. The date picker is commonly used in online booking systems, scheduling applications, and event calendars.

Content

When creating a date picker :

  • Choose one date format and keep it consistent. If one date picker displays MM/DD/YYYY, be sure to repeat the same date format throughout your interface.
  • Always use placeholder text in date fields to provide an example of the accepted date format.
  • Use helper text to provide permanent guidance below the date field.
  • Use field level error messages to alert users when their inputted date or date format is invalid.