Components

Time picker

A .ds-input that opens a flat .ds-timepicker__popover — a bordered surface holding two scrollable columns, hours (00–23) and minutes (00–55 by step). Click an hour and a minute to set HH:MM; the field also accepts typed input. No radius, no shadow.

Anatomy

The open .ds-timepicker__popover (z-index --ds-z-popover) lays two .ds-timepicker__col lists side by side, split by a 1px rule. Each .ds-timepicker__opt shifts to the alt surface on hover; the chosen value fills with ink via .is-selected.

Field + popover

<div class="ds-timepicker">
  <input class="ds-input" type="text" value="09:30" aria-haspopup="dialog" aria-expanded="true">
  <div class="ds-timepicker__popover" role="dialog" aria-label="Choose time">
    <div class="ds-timepicker__col" role="listbox" aria-label="Hour">
      <button class="ds-timepicker__opt" role="option">08</button>
      <button class="ds-timepicker__opt is-selected" role="option" aria-selected="true">09</button>
      <button class="ds-timepicker__opt" role="option">10</button>
    </div>
    <div class="ds-timepicker__col" role="listbox" aria-label="Minute">
      <button class="ds-timepicker__opt" role="option">15</button>
      <button class="ds-timepicker__opt is-selected" role="option" aria-selected="true">30</button>
      <button class="ds-timepicker__opt" role="option">45</button>
    </div>
  </div>
</div>

Interactive

The input toggles the popover; clicking an hour then a minute writes HH:MM into the field. It closes on outside-click or Escape. The small inline script below wires this demo (no dependencies).

Input opens popover

<div class="ds-timepicker" data-timepicker>
  <input class="ds-input" type="text" value="09:30" placeholder="hh:mm"
         aria-haspopup="dialog" aria-expanded="false" data-timepicker-input>
  <div class="ds-timepicker__popover" role="dialog" hidden data-timepicker-popover>
    <div class="ds-timepicker__col" role="listbox" aria-label="Hour" data-timepicker-hours>…</div>
    <div class="ds-timepicker__col" role="listbox" aria-label="Minute" data-timepicker-minutes>…</div>
  </div>
</div>

React

The TimePicker renders a .ds-input that opens the two-column popover, picks an hour and minute, and accepts typed input — closing on outside-click and Escape. Works controlled (value/onChange) or uncontrolled (defaultValue). value is an "HH:MM" string; step sets the minute increment.

import { TimePicker } from "@diametral/design-system/react";

<TimePicker
  defaultValue="09:30"
  step={15}
  onChange={(value) => setTime(value)}
/>