Calendar

Native date picker via input type="date". Pass type="month", type="week", or type="datetime-local" for the other built-in calendar pickers.

CalendarExamples.tsrx
import { Calendar } from "@octaneui/core";
import { CalendarDays } from "@octaneui/icons/lucide";

export function CalendarExamples() @{
  <>
    <Calendar aria-label="Start date" />
    <Calendar
      left={<CalendarDays size={16} />}
      aria-label="Event date"
      defaultValue="2026-08-24"
    />
    <Calendar type="month" aria-label="Billing month" />
    <Calendar type="datetime-local" aria-label="Appointment" />
    <Calendar aria-label="Disabled" disabled defaultValue="2026-08-24" />
  </>
}