/ time-field

TimeField

@kumiki/headless/time-field

Planned Svelte 5 attachments for TimeField — per-segment spinbutton coordinators + group wrapper with locale-aware segment order.

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Attach to your own DOM

<script lang="ts">
  import { createTimeField } from '@kumiki/headless/time-field';
  const ctl = createTimeField({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Compound usage

<script lang="ts">
  import { TimeField } from '@kumiki/components/time-field';
</script>

<TimeField.Root>
  <!-- subcomponents go here -->
</TimeField.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Locale-aware time input

<script lang="ts">
  import { Tailwind as TimeField } from '@kumiki/atelier/time-field';
  import { Time } from '@internationalized/date';

  let value = $state(new Time(9, 30));
</script>

<TimeField.Root bind:value granularity="minute">
  <TimeField.Label>Open at</TimeField.Label>
  <TimeField.Input>
    <TimeField.Segment kind="hour" />
    <TimeField.Segment kind="minute" />
    <TimeField.Segment kind="dayPeriod" />
  </TimeField.Input>
</TimeField.Root>

This component, layer by layer

Keyboard

Test discipline