Skip to main content

Timepicker

Status: Content below is sourced from the Naos Figma documentation page for TimePicker (file nfTKjsYTKM2qvIo8KXDAXV, node 8951:22285, "🧩 Naos – Forms and inputs", checked 2026-08-19) plus the component's TypeScript source. This Figma page has no written "when to use" / usage-rules text at all (unlike e.g. Banner or Drawer) — only anatomy, spacing, placement, and behavior diagrams. Everything below is either directly labeled in the file or an anatomy/behavior observation; qualitative usage guidance is left as an explicit TODO — nothing invented.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/molecular/Timepicker/types/Timepicker.types.ts (package @dtsl/react, exported as Timepicker)

Props (verbatim from source, top-level TimepickerProps)​

export interface TimepickerProps {
	size?: string
	headerLabel: string
	time: number
	onChange: (time: number) => void
	onTriggerClick?: (isVisible: boolean, e: React.MouseEvent) => void
	onNow?: (time: number) => void
	nowLabel?: string
	okLabel?: string
	onClose?: (value: boolean) => void
	onConfirm?: () => void
	minuteInterval?: number
	is24HourFormat?: boolean
	className?: string
	floatingPanelClassName?: string
}

Built internally on FloatingPanel (see floating-panel).

Anatomy​

TimePicker (from the Figma "Anatomy" section, numbered list):

  1. Container
  2. Hour Label
  3. Minutes Label
  4. TimePicker Item
  5. Time column
  6. Scrollbar
  7. Clickable Chip — "now" shortcut (maps to nowLabel/onNow)
  8. Button (maps to okLabel/onConfirm)

TimePickerItem sub-component, from its own anatomy diagram:

  1. Container
  2. Inner container
  3. Label

Real variant axes (from the Figma top variant grid)​

  • Mobile: No / Yes
  • AM/PM: Yes / No — the "No" variant shows a 2-column (Hour/Minute) 24-hour layout with no AM/PM column; the "Yes" variant adds a third AM/PM column. This maps directly to is24HourFormat.

Minute options observed in every example increment by 5 (00, 05, 10, ... 55) — consistent with minuteInterval, though the file doesn't state whether 5 is the actual default (source only marks it optional number, no default shown).

When to Use​

TODO — not covered on this Figma page. Needs design/PM input.

When NOT to Use​

TODO — not covered on this Figma page. Needs design/PM input.

Real interaction flow (from the Figma "Behavior" section, a 7-frame sequence)​

  1. Closed trigger input shows a placeholder, e.g. "HH:MM AM"
  2. Clicking it opens a floating panel with scrollable Hour and Minute columns, both unselected, plus the "Now" chip
  3. Selecting an hour highlights that value while minute remains unselected
  4. Selecting a minute completes the pick (both columns show a highlighted value)
  5. A filled state also shows the "Now" chip alongside a completed selection
  6. Confirming closes the panel; the trigger input now displays the formatted selection (e.g. "04:30 AM")
  7. Reopening the picker shows the previously selected values still highlighted and scrolled into view

Placement​

Two real placements shown:

  • Standalone inline input: a time input field with a clock icon trigger button, no surrounding chrome
  • Inside a panel context: the trigger input sits inside what looks like the FloatingPanel/settings-panel pattern already used elsewhere in Naos, with the picker itself opening as its own floating panel anchored to the input

Decision Logic​

Need 12-hour display with AM/PM?
  YES → is24HourFormat={false} (or omit — confirm actual default)
  NO  → is24HourFormat={true}

Want a quick-select shortcut to the current time?
  YES → provide nowLabel, handle onNow

Accessibility​

TODO — not covered on this Figma page. Needs UX/product input.

Common Mistakes​

TODO — not covered on this Figma page. Needs UX/product input.