Components/Inputs
Date Picker
Date pickers let people pick a date or a range of dates from a calendar that opens under the field
Playground
Playground
Pick a variant, then open the field and click a date. Apply writes it into the field
Alignment
Alignment
Alight sets which edge of the field the calendar lines up with. Use Right when the field sits near the right edge of the layout
Types
Single and multiple
Single shows one month. Multiple shows two months side by side with a rail of date range presets, for reports and bookings that span weeks
Calendar
Calendar
The calendar panel on its own. Date Range marks a start and an end with a band between them. Time, action buttons and date presets switch on and off
Dates
Date states
Today keeps a light brand fill so people can find it, the picked date takes the solid brand fill
Parts
Presets and year
Type 01 chips sit under the single calendar, Type 02 rows build the range rail. The year select opens a short list around the current year
Usage
When to use
Use when
- People pick a date close to today, like a delivery slot, a deadline or a meeting
- The day of the week matters, the calendar shows it at a glance
- People pick a start and an end, like a report period or a stay, turn on Date range or use Multiple
Avoid when
- The date is far in the past, like a birth date, let people type it in a Text Input
- There are only a few valid dates, list them in a Dropdown or as radio options
- People only need a month or a year, a Dropdown is faster
Guidance
Do and don’t
Spell out the month in the field so the date reads the same in every locale
Don’t show numeric dates like 07/08/26, people mix up the day and the month
Specs