All components
Forms
Calendar
beta
Since 1.1
Month-grid date selection with keyboard navigation, min/max range, and today/selected states.
Forms
primitive
Display
Documented
import { Calendar } from '@ivim/native/components';
When to use
Use when
People pick a single calendar date and benefit from seeing surrounding days.
Scheduling flows where month context matters (appointments, refill dates).
Don't use when
A date can be typed faster than picked — pair with a text field, or use DatePicker for the compact field + popover.
Example
Preview
Code
July 2026
Su
Mo
Tu
We
Th
Fr
Sa
Guidelines
Do
Constrain selectable days with minValue/maxValue for booking windows.
Don't
Don't use a full calendar inline when space is tight — use DatePicker so the grid appears in a popover.
Accessibility
Roles and screen-reader behavior this component provides, plus keyboard interactions.
•
Renders role="grid" with rows; each day is a labeled button exposing selected/disabled state.
•
Every day announces its full date (e.g. "July 18, 2026").
Arrow keys
Move the focused day by one day (left/right) or one week (up/down).
Enter / Space
Selects the focused day.
Platform & RTL
Behavior that differs across the platforms this component runs on.
Web
Arrow-key navigation and Enter selection via React Native Web.
iOS
Tap to select; VoiceOver reads the grid and per-day labels.
Android
Tap to select; TalkBack reads the grid structure.
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.
Related components
Components that solve adjacent problems or compose with this one.
DatePicker
Compact date field that opens a Calendar in a portalled overlay; commits on selection.
Input
Single-line text entry, with TextField for labelled fields and InputGroup for adornments, prefixes, and attached controls.
Select
Single-choice picker with sections, rich items, a searchable combo-box mode, and a popover-on-web / sheet-on-native overlay.