Content & Data
Calendar Day
Calendar Day is a single selectable day cell inside a month calendar grid.
State (Default/Today/Selected/Disabled/Outside) — 5 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-12
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.5.0-beta
Known open questions
- Multi-select and event-indicator states are not confirmed. Range start/middle/end states are implemented — see Calendar Grid's range mode.
- Calendar Day should be composed inside Calendar Grid — not used standalone without grid context.
Live preview
Single day cell — intended for use inside Calendar Grid.
Default / today / selected / disabled / outside month
Visible day numbers use full-date accessible names such as “14 July 2026”. Today uses border and dot indicators — not color alone.
Purpose
A single day cell within a full Calendar month grid — the actual date-picker popover Date Picker's input field needed but didn't include.
Anatomy
Calendar Day = native button + visible day number + optional today indicator.
Variants and states
default · today · selected · disabled · outside
When to use
Composed together (7×6 grid) to build the calendar popover for Date Picker.
When not to use
Standalone outside a full Calendar composition.
Accessibility
role="grid" with role="gridcell", full arrow-key navigation. Disabled dates need aria-disabled.
Common mistakes
Conflating "Outside" (adjacent month, often still clickable) with "Disabled" (blocked-out, never selectable) — they look similar but mean different things.
Properties
State as variants. Number (text).
What is the difference between today and selected?
Today marks the current calendar date. Selected marks the chosen value. They are independent and use separate visual indicators.
How is a Calendar Day labelled for screen readers?
Each day exposes a full understandable date such as “14 July 2026”, not only the visible numeral.
Can Calendar Day be used outside Calendar Grid?
Only for previews or documentation. Production usage should compose Calendar Day through Calendar Grid for keyboard and grid semantics.
Tokens used
semantic/action/primarysemantic/text/primarysemantic/text/disabledradius/full
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| date | YYYY-MM-DD | — | Canonical date-only value. |
| selected | boolean | — | Selected state. |
| today | boolean | — | Highlights current date. |
| disabled | boolean | — | Non-selectable day. |
| outsideMonth | boolean | — | Adjacent-month day styling. |
| onDateSelect | (date) => void | — | Pointer selection callback. |
React example
Copy React example
import { CalendarDay } from "@/components/ui/CalendarDay";
export function Example() {
return <CalendarDay date="2026-07-14" selected />;
}