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
Name Type Default Required Bindable Description
id text req Stable id used to associate the label, input, description, and error. Required.
value text bind Bindable canonical 24-hour time string (HH:mm or HH:mm:ss).
granularity 'minute' | 'second' 'minute' Time precision. Defaults to minute precision.
timezones readonly string[] Optional timezone select values, such as America/Denver or UTC.
timezone string | undefined bind 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.
onchange (detail: TimeFieldChange) => void Called when the user commits a time or timezone change.