Forms

TimeField

Standalone time-of-day field that collects a canonical time string with optional timezone selection.

import { TimeField } from '@lostgradient/cinder/time-field';
formtimeinternationalization
01

Overview

Standalone time-of-day input with optional timezone selection.

Usage

svelte 
<script lang="ts">
  import TimeField from '@lostgradient/cinder/time-field';

  let time = $state('09:30');
</script>

<TimeField id="reminder-time" label="Reminder time" bind:value={time} />
Live preview
02

When to use

Use when
  • Collecting a time of day without a date, such as a reminder time or office-hours boundary.
  • Pairing a time value with an optional timezone while keeping a canonical `HH:mm` or `HH:mm:ss` value.
Avoid when
  • Collecting a full date range — use date-range-field instead.
03

Examples

Basic time field

Standalone time input with optional timezone selection.

04

Props

Props for time-field
NameTypeDefaultDescription
id required text Stable id used to associate the label, input, description, and error. Required.
value bindable text Bindable canonical 24-hour time string (HH:mm or HH:mm:ss).
granularity 'minute' | 'second' 'minute' Time precision. Defaults to minute precision.
timezones string[] Optional timezone select values, such as America/Denver or UTC.
timezone bindable text Bindable selected timezone. Defaults to the first timezone when provided.
timezoneName text Name for the timezone value in native form submission. Defaults to ${name}-timezone.
label text Visible label text rendered above the input.
description text Helper text rendered below the control.
error text Validation error message.
disabled boolean false Disable all controls.
readonly boolean false Prevent editing while keeping the submitted value.
required boolean false Mark the time input as required.
name text Name for form submission.
onValueChange (detail: TimeFieldChange) => void Called when the user commits a time or timezone change.