Input Datetime

Initial uncontrolled value (used only to seed the controller).

Disabled flag — blocks editing and dims the input.

Surfaced error kind. Bindable.

Treat an empty input as an error on blur.

Currently selected value. `Date | null` for single inputs, `DateRange` when `range` is set. Bindable.

Background surface step for the field.

Resting border variant. The line always occupies its 1px of layout, so swapping its color on focus/error never shifts content.

Border variant applied only on hover/press, composed over `border`.

Surface emphasis ramp for the field's own panel. `tertiary` (the default) paints the neutral surface ramp regardless of `tone`; `secondary` follows the tone palette; `primary` fills with the accent surface.

Corner radius override. Without it the corner follows the size tier (`control.<size>`). `inner` renders a concentric corner computed from the nearest parent panel (parent radius − parent padding, floored at `2xs`).

Separator joining the two range groups. Default `"–"`.

Override the locale-derived separator between date parts.

Drop shadow for the field's surface.

Visual size — drives the field height + density.

Semantic tone palette for the field's surface. Independent of the transient `data-error` state, which always flips the field to `danger`.

Blur + saturate whatever sits behind the field (for fields floating over content).

How many months the calendar popover shows side by side. Maps to the Calendar's `numberOfMonths` (clamped to 1–3 by the Calendar). Only applies when `calendar` is set.

Whether the input stretches to fill its container. Default: true.

Border radius for the bottom-left and bottom-right corners.

Border radius for the top-left and bottom-left corners.

Border radius for the top-right and bottom-right corners.

Border radius for the top-left and top-right corners. Overrides `radius` on those corners only (flush-edge chains).

Show a trailing calendar-icon trigger that opens a date-picker popover. Only takes effect for `granularity` `"date"` / `"datetime"` (never for `"time"`). Default `false`. Opt in to add the picker to a typed field.

Which units to edit. Default: `"date"`.

Force 24-hour (no AM/PM) or 12-hour mode for the time portion. When omitted, the locale's default hour cycle decides.

Locale tag driving date segment order, separators, and placeholders. For a non-English locale it also names the segments (`pt-BR` → "Ano", "Mês", "Dia") via `Intl.DisplayNames`, unless `labels` names them explicitly.

Latest allowed value (inclusive). Same semantics as `minValue`, at the other end of the window.

Earliest allowed value (inclusive). Disables earlier days in the calendar popover AND validates typed input — a complete value below it surfaces the `out-of-range` error on blur (typing itself stays free). Compared at the input's granularity: date-only by Y/M/D, datetime to the minute, time by wall-clock time-of-day.

`name` for the hidden form input (range emits `name` + `name-end`).

Fires whenever the error transitions.

Fires when the value changes.

Render a start/end range (value becomes a {@link DateRange}).

Accessible label for the group. Wins over `labels.date` / `labels.time` / `labels.datetime`. Default derived from granularity.

Every accessible string the field renders — segment names ("Year", "Hour", "Day period"), the field name per granularity, the range group names + how they combine with a segment name, and the calendar trigger name. Precedence per string: this prop > the `locale`-derived segment name (`Intl.DisplayNames`, non-English locales only) > the English default. Plain strings and `{placeholder}` templates survive Astro hydration.

Optional class string forwarded to the root element.

id forwarded to the root element.

Per-slot style/props passthrough.

Astro / vanilla: serialize the props into `data-input-datetime-config` (on the field root) so the client runtime hydrates this instance and `getPindoba(el, "input-datetime")` can `update()` it. Frameworks with their own reactivity don't need it.