Calendar

The calendar provides keyboard navigation, visible focus, outside days, and an explicit selected state.

October 2026

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Selected 29/09/2026

Show codeCopy

Import

import { Calendar } from "@workshop1/ui/components/calendar"

Selection modes

Use mode="single" for one appointment date and mode="range" when a start and end date belong to the same task. Keep the selected value controlled when another part of the form needs it, and pass disabled dates for days the user cannot choose.

Accessibility

Use a visible label when the calendar belongs to a form field. The primitive provides grid keyboard navigation and a focused day, but surrounding copy still needs to explain what date is being chosen. Announce a selection when the calendar updates another region.

Best practices

• Display dates in the user's locale outside the calendar.
• Keep unavailable dates disabled instead of accepting and rejecting them later.
• Use an input alongside the calendar when users often enter distant dates.