Calendar
inputsA date field component that allows users to enter and edit date.
Preview
April 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
npm install @launchapp/design-systemImport
import { Calendar } from "@launchapp/design-system";Examples
Single Date Picker
const [date, setDate] = React.useState<Date | undefined>();<Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border"/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "multiple" | "range" | "single" | Selection mode for the calendar. |
selected | Date | Date[] | DateRange | — | The selected date(s). |
onSelect | (date: Date | undefined) => void | — | Callback when a date is selected. |
disabled | Matcher | Matcher[] | — | Dates to disable. |
initialFocus | boolean | — | Whether to focus the calendar on mount. |