Time Field

A typed time of day with locale-aware 12/24-hour entry, ISO string submission, optional seconds, inclusive bounds and native form reset. Time Field shares Date Field's Temporal validation and draft handling without acquiring a date or timezone. It accepts the same validate and set-value controller requests.

Opening time

Type a time or paste an ISO value. Display follows the locale; submission remains a time without a date or timezone.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-time-field/ui-time-field.html"
>

<ui-time-field
  label="Opening time"
  name="opening"
  value="09:30"
  min="08:00"
  max="18:00"
  locale="en-US"
></ui-time-field>

<script setup>
  import { UiTimeField } from "@threadlabs/looma";
</script>

<template>
  <UiTimeField
    label="Opening time"
    name="opening"
    value="09:30"
    min="08:00"
    max="18:00"
    locale="en-US"
  />
</template>

import { UiTimeField } from "@threadlabs/looma";

export default function Example() {
  return <UiTimeField
    label="Opening time"
    name="opening"
    value="09:30"
    min="08:00"
    max="18:00"
    locale="en-US"
  />;
}

/** @jsxImportSource preact */
import { UiTimeField } from "@threadlabs/looma";

export default function Example() {
  return <UiTimeField
    label="Opening time"
    name="opening"
    value="09:30"
    min="08:00"
    max="18:00"
    locale="en-US"
  />;
}

<script>
  import { UiTimeField } from "@threadlabs/looma";
</script>

<UiTimeField
  label="Opening time"
  name="opening"
  value="09:30"
  min="08:00"
  max="18:00"
  locale="en-US"
/>

import { Component } from "@angular/core";
import { UiTimeField } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiTimeField],
  template: `
    <span
      ui-time-field
      [label]="'Opening time'"
      [name]="'opening'"
      [value]="'09:30'"
      [min]="'08:00'"
      [max]="'18:00'"
      [locale]="'en-US'"
    ></span>
  `,
})
export default class Example {}

Include seconds

Show seconds while preserving nonzero fractions in the bound value.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-time-field/ui-time-field.html"
>

<ui-time-field
  label="Start time"
  value="14:30:45.123"
  granularity="second"
  hour-cycle="h23"
></ui-time-field>

<script setup>
  import { UiTimeField } from "@threadlabs/looma";
</script>

<template>
  <UiTimeField
    label="Start time"
    value="14:30:45.123"
    granularity="second"
    hour-cycle="h23"
  />
</template>

import { UiTimeField } from "@threadlabs/looma";

export default function Example() {
  return <UiTimeField
    label="Start time"
    value="14:30:45.123"
    granularity="second"
    hourCycle="h23"
  />;
}

/** @jsxImportSource preact */
import { UiTimeField } from "@threadlabs/looma";

export default function Example() {
  return <UiTimeField
    label="Start time"
    value="14:30:45.123"
    granularity="second"
    hourCycle="h23"
  />;
}

<script>
  import { UiTimeField } from "@threadlabs/looma";
</script>

<UiTimeField
  label="Start time"
  value="14:30:45.123"
  granularity="second"
  hourCycle="h23"
/>

import { Component } from "@angular/core";
import { UiTimeField } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiTimeField],
  template: `
    <span
      ui-time-field
      [label]="'Start time'"
      [value]="'14:30:45.123'"
      [granularity]="'second'"
      [hourCycle]="'h23'"
    ></span>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: span

Attributes

Name	Description	Property	Type	Default	Allowed values
`disabled`	Prevents editing and omits submission.	`disabled`	`boolean`	`false`	`—`
`form`	Optional ID of a form outside this component’s ancestor tree.	`form`	`string`		`—`
`granularity`	Smallest displayed unit. Nonzero seconds and fractions are preserved.	`granularity`	`keyword`	`minute`	`minute, second`
`hour-cycle`	Hour cycle; omission follows the locale.	`hourCycle`	`keyword`	`—`	`h11, h12, h23, h24`
`input-id`	ID of the active native input, for an authored label.	`inputId`	`string`		`—`
`invalid`	External invalid state supplied by the application.	`invalid`	`boolean`	`false`	`—`
`label`	Optional accessible input name; prefer a visible label associated with input-id.	`label`	`string`		`—`
`locale`	Intl locale for digits and 12/24-hour conventions. ISO time paste is always accepted.	`locale`	`string`	`en-US`	`—`
`max`	Inclusive latest permitted time. A maximum before the minimum wraps across midnight, matching native time inputs.	`max`	`string`		`—`
`min`	Inclusive earliest permitted time.	`min`	`string`		`—`
`name`	Native form field name for the canonical time.	`name`	`string`		`—`
`placeholder`	Optional hint inside the empty input.	`placeholder`	`string`		`—`
`readonly`	Preserves selection and submission while preventing edits.	`readonly`	`boolean`	`false`	`—`
`required`	Requires a complete time.	`required`	`boolean`	`false`	`—`
`size`	Input's shared size scale.	`size`	`keyword`	`md`	`sm, md, lg`
`value`	Initial ISO time, replaced when changed externally. Live edits emit input/change; reset restores this value.	`value`	`string`		`—`

Framework props

Name	Type	Default	Allowed values
`disabled`	`boolean`	`false`	`—`
`form`	`string`		`—`
`granularity`	`"minute" \| "second"`	`minute`	`minute, second`
`hourCycle`	`"h11" \| "h12" \| "h23" \| "h24"`	`—`	`h11, h12, h23, h24`
`inputId`	`string`		`—`
`invalid`	`boolean`	`false`	`—`
`label`	`string`		`—`
`locale`	`string`	`en-US`	`—`
`max`	`string`		`—`
`min`	`string`		`—`
`name`	`string`		`—`
`placeholder`	`string`		`—`
`readonly`	`boolean`	`false`	`—`
`required`	`boolean`	`false`	`—`
`size`	`"sm" \| "md" \| "lg"`	`md`	`sm, md, lg`
`value`	`string`		`—`

Events

Name	Detail	Description
`change`	`object` `value`: `string` (required) `trigger`: `keyword` (required)	Emitted when a toggleable control changes checked state.
`input`	`object` `value`: `string` (required) `trigger`: `keyword` (required)	Emitted with the declared detail payload.
`query-change`	`object` `query`: `string` (required)	Emitted with the declared detail payload.
`validation-change`	`object` `invalid`: `boolean` (required) `message`: `string` (required)	Emitted with the declared detail payload.

Slots

No slots.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

No shared tokens.