Weekday Picker

Allows the user to pick a single or multiple days from a week.

Types

Day

  • Default variant (used most often)
  • Desktop and native app
  • Single or multi-select
  • Fixed width
WeekdayPicker-Example-Day

 

Date

  • Native app only
  • Use only when the date is relevant (otherwise, use the day variant)
WeekdayPicker-Example-Date

 

Date variants

Split months & split years

Lean on the title to describe the presented timeframe.

WeekdayPicker-Example-SplitMonth
WeekdayPicker-Example-SplitYear
WeekdayPicker-Example-SingleMonth

 

Indicators

Use to communicate the existence of an event or occurrence. Use only when it helps the user focus their attention.

WeekdayPicker-Example-Indicators

 

Navigation interaction

The user may navigate from one week to the next using by tapping on the chevrons or swiping along the weekday picker itself. Use both, not one or the other.

WeekdayPicker-Example-Navigation

 

Title size: Large vs small

Use the size that matches the rest of the form.

WeekdayPicker-Example-TitleSize

 

Examples

Day

WeekdayPicker-Example-Day

 

Date

WeekdayPicker-Example-Date

 

Resources

(internal only)

Figma

Storybook