sheengemologic ui
All components

TimeField

A locale-ordered segmented wall-clock editor with a timezone-free ISO projection.@gemologic/sheen-date · date and time

Playground

Cutoff time
430PM
<TimeField label="Cutoff time" name="cutoff" defaultValue={createTime(16, 30)}  granularity="minute"/>

Variant matrix

Cutoff time
Cutoff time
430PM
hourCycle: 12
Cutoff time
430PM
hourCycle: 24
Cutoff time
1630
granularity: minute
Cutoff time
430PM
granularity: second
Cutoff time
43000PM

Anatomy

Package
@gemologic/sheen-date
Source
packages/date/src/TimeField.tsx
Tokens
  • --sheen-color-border-control
  • --sheen-color-bg-inset
  • --sheen-color-focus-ring

Accessibility

Role: group of spinbuttonsKeyboard: ArrowLeft, ArrowRight, ArrowUp, ArrowDown, PageUp, PageDown, Home, End, numeric keys

Do

  • Keep a wall-clock Time separate from the zone that gives it an instant.

Do not

  • Do not anchor a standalone Time to the browser's current date.

Generated props

NameTypeDefaultDescription
label *string—Required visible field label.
valueTime | null—App-owned Sheen Time, or null.
defaultValueTime | null—Initial uncontrolled wall time.
onValueChange(value: Time | null) => void—Receives complete valid wall times and clearing.
placeholderValueTime—Deterministic values shown behind empty segments.
minValueTime—Minimum wall time.
maxValueTime—Maximum wall time.
localestring—Explicit BCP 47 locale, defaulting to theme context.
hourCycle12 | 24—Explicit 12- or 24-hour cycle; omission follows the locale.
granularityTimeGranularityminuteSmallest editable unit.
namestring—Native form name for HH:mm:ss.SSS.
formstring—Optional external form owner.
descriptionstring—Associated instructions.
errorstring—Associated app validation error.
requiredbooleanfalseMarks the editor required.
disabledbooleanfalseDisables editing and projection.
readOnlybooleanfalseRetains focus while rejecting edits.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.