Calendar
npx @intellihelper/cli@latest add calendarSingle date
One Calendar import — switch modes and variants with props.
Date range
Range selection with start, middle, and end highlighting.
Dropdown caption
Month and year dropdowns with the outline variant.
Sizes
Compact, default, and large footprints via the size prop.
About this component
Calendar is part of Forms. Frosted date picker with range and multi-select modes.
Install with npx @intellihelper/cli@latest add calendar. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Calendar
Use when
- Use Calendar when frosted date picker with range and multi-select modes.
- Collecting user input with labeled fields, selects, checkboxes, or dates.
- Settings screens that need glass chrome around standard controls.
Avoid when
- Read-only display of data — use typography or tables.
- Complex multi-page wizards without a stepper or progress pattern.
Accessibility notes
- Every control needs a visible label (or aria-label when space is constrained).
- Associate helper and error text with aria-describedby.
- Preserve focus order; do not trap keyboard users outside the form.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Stack field + label + description vertically with consistent spacing.
- Use native-select only when you need zero-JS progressive enhancement.
FAQ
Related components
View all forms →Input
Translucent glass text fields with chrome and outline variants.
Open →Label
Accessible form labels with chrome, muted, and required styles.
Open →Password Input
Glass password field with show/hide toggle and field states.
Open →OTP Input
One-time code slots with paste support and completion callback.
Open →