Date and time

#Example

<div class="grid grid-cols-2 gap-3 max-w-sm">
  <input type="date" class="input" value="2026-10-13" aria-label="Date">
  <input type="time" class="input" value="09:30" aria-label="Time">
  <input type="datetime-local" class="input col-span-2" value="2026-10-13T09:30" aria-label="Date and time">
</div>

#Classes

1 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.input-group > .input, .input-group > .select {
  flex: 1 1 0%;
  width: auto;
}

.input::-webkit-calendar-picker-indicator:hover {
  background: var(--foreground);
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Date and time: start from the base class, then add modifiers -->
<div class="grid grid-cols-2 gap-3 max-w-sm">
  <input type="date" class="input" value="2026-10-13" aria-label="Date">
  <input type="time" class="input" value="09:30" aria-label="Time">
  <input type="datetime-local" class="input col-span-2" value="2026-10-13T09:30" aria-label="Date and time">
</div>

#Accessibility

• Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components