TimePicker
A contextual list of Sheen wall-clock values with deterministic interval generation.@gemologic/sheen-date · date and timePlayground
<TimePicker label="Review slot" name="slot" stepMinutes={30} defaultValue={createTime(14, 30)} />Variant matrix
Review slot
hourCycle: 12
hourCycle: 24
Anatomy
- Package
@gemologic/sheen-date- Source
packages/date/src/TimePicker.tsx- Tokens
--sheen-color-bg-raised--sheen-color-border-control--sheen-color-focus-ring
Accessibility
Role: button and listboxKeyboard: Tab, Enter, Space, Arrow keys, Home, End, Escape, TypeaheadDo
- Use explicit options when availability is not a uniform interval.
Do not
- Do not treat the selected wall time as an instant without a date and zone.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required visible picker label. |
value | Time | null | — | App-owned Sheen Time, or null. |
defaultValue | Time | null | — | Initial uncontrolled selection. |
onValueChange | (value: Time | null) => void | — | Receives selected Sheen Time values and clearing. |
options | readonly TimePickerOption[] | — | Optional explicit labeled wall times; values must be unique. |
stepMinutes | number | 15 | Generated interval from 1 through 720 minutes when options are omitted. |
locale | string | — | Explicit BCP 47 label locale, defaulting to theme context. |
hourCycle | 12 | 24 | — | Explicit generated-label hour cycle. |
name | string | — | Native form name for HH:mm:ss.SSS. |
form | string | — | Optional external form owner. |
placeholder | string | — | Empty-selection text. |
description | string | — | Associated instructions. |
error | string | — | Associated app validation error. |
required | boolean | false | Requires a selection. |
disabled | boolean | false | Disables interaction and projection. |
readOnly | boolean | false | Allows inspection while rejecting changes. |