The Basics

Nova's temporal components at their most basic can be implemented with a simple element declaration and will accept valid ISO-8601 strings.

1. Copy this valid ISO-8601 string and try pasting it into the component: 2026-05-15T14:30:00Z
2. Copy this invalid ISO-8601 string and paste it into the component: 2026-13-45T99:99Z

Time: smallest-unit

Control the precision of the time portion with smallest-unit. Time-based components only support smallest-unit — the largest unit is fixed by the component itself (date for nova-datetime, hour for nova-time). Valid time units are hour, minute, second, millisecond, microsecond, and nanosecond.

Copy/Paste Behavior

Nova's temporal components deviate from the HTML spec for date-time input elements and will copy a full ISO-8601 string to your clipboard. Try it by focusing on the nova-datetime component, copying the value, and pasting into the text input below.

Min and Max

Constrain the allowed range with min and max attributes. Both accept ISO-8601 strings. Values entered or pasted outside the range will be marked as invalid.

1. This value is in range — try pasting it: 2026-02-08T12:00Z
2. This value is past max — try pasting it: 2026-03-01T00:00Z

Hotkeys

Add the hotkeys boolean attribute to enable extra keyboard shortcuts. With hotkeys enabled, pressing n while focused on the component sets its value to the current UTC now.

1. Focus the first component (no hotkeys) and press n — nothing happens.
2. Focus the second component (hotkeys enabled) and press n — it jumps to the current time.

Overflow

By default, segment edits that create an invalid date clamp to the nearest valid date (matching Temporal's own default). Set overflow="reject" to keep the typed value visible and mark the component as invalid instead.

1. On both components below, change the month segment from 01 to 02.
2. The first (default) clamps day 31 down to 28.
3. The second (overflow="reject") keeps day 31 visible and invalid.

Duration

Duration is natively supported in Temporal. The nova-duration component provides an input control to handle ISO-8601 compliant duration strings.

1. Copy this valid duration string and paste it into the component (it should accept): PT1H30M
2. Copy this invalid duration string and paste it into the component (it should error): 1H30M

Duration: largest-unit and smallest-unit

Control which units the component exposes with largest-unit and smallest-unit. Together they define the visible range of segments — anything outside that range is hidden. Valid units are year, month, day, hour, minute, second, millisecond, microsecond, and nanosecond.

1. Hours/minutes/seconds only — try pasting: PT2H15M30S
2. Sub-second precision — try pasting: PT5M30.250S

Duration: largest-unit-digits

Use largest-unit-digits to widen the digit count of the largest visible unit. This is useful when values can exceed the natural width — for example, a total-hours field that can reach four digits.

1. Paste a large hour value to see all four digits: PT1234H

Temporal Groups

nova-temporal-group coordinates two or more temporal inputs and exposes a single computed output. Mode is inferred from the slots you provide — no mode attribute to set.

• Range mode — only t0, t1, … slots. Output is the duration between the first and last temporal.
• Compute mode — a t0 anchor plus one or more d0, d1, … duration slots. Output is the anchor with each duration applied in DOM order.

Compute Mode

Add a d0 duration slot beside the t0 anchor and the group switches to compute mode automatically. The output is re-formatted by t0's component, so it mirrors the anchor's precision.

1. Edit the duration to PT2H30M and watch the output update.
2. Try pasting onto the start datetime: 2026-06-15T08:00Z

Multi-Step Compute

Compute mode chains any number of duration slots. Each duration is applied in DOM order, so the output is t0 + d0 + d1 + d2 + …. Use it for burn/coast/burn-style sequences or any flow with multiple stages.

Range Mode: min & max

In range mode, the group's min and max are durations — they constrain the gap between t0 and the last temporal slot. The component goes invalid if the computed range falls outside.

1. This duration is in range — try setting end to: 2026-05-01T12:00Z
2. This pushes past max="PT8H" — try setting end to: 2026-05-01T20:00Z

Compute Mode: min & max

In compute mode, min and max are temporal values matching t0's type — they constrain the computed result, not the inputs. Push the duration until the computed end runs past max.

Date-Only Range

The group works with any temporal type — not just nova-datetime. Use nova-date for day-grain ranges; the output reports days.

Time-Only Range

nova-time ranges stay clock-only — there's no overnight inference, so the duration is computed directly from t0.until(t1) with hours as the largest unit.

Output Format

By default, range mode outputs an ISO duration and compute mode outputs the computed end. The output-format attribute (or .outputFormat property) switches the output slot to one of the ISO 8601 interval forms — interval, start-duration, or duration-end — or the single-value end / duration. Endpoint FormData entries are unaffected.

State Propagation

disabled and readonly on the group propagate to every child input automatically. Set them once on the group instead of plumbing them through each slotted element.

Form Integration

nova-temporal-group behaves like a <fieldset>. With name="window", each child slot ships under window[t0], window[t1], … plus a window[output] entry for the computed value. Set required to block submission until every slot has a complete, valid value.

1. Submit the form — every entry is listed below the button.
2. Clear a segment in either input and try again — submission is blocked.