TimeField

<script lang="ts">
  import { TimeField } from 'sv5ui';
  import { Time } from '@internationalized/date';

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

<TimeField bind:value />

<!-- Hour only -->
<TimeField granularity="hour" />
<!-- Down to seconds -->
<TimeField granularity="second" />

<!-- Force 24-hour clock -->
<TimeField hourCycle={24} />
<!-- Force 12-hour clock with AM/PM -->
<TimeField hourCycle={12} />

<script lang="ts">
  import { TimeField } from 'sv5ui';
  import { Time } from '@internationalized/date';
</script>

<!-- Office hours only -->
<TimeField minValue={new Time(9)} maxValue={new Time(17)} />

<!-- Hide the decorative icon -->
<TimeField icon={false} />

<TimeField variant="outline" />
<TimeField variant="soft" />
<TimeField variant="subtle" />
<TimeField variant="ghost" />

<TimeField size="xs" />
<TimeField size="md" />
<TimeField size="xl" />

<script lang="ts">
  import { TimeField } from 'sv5ui';
  import { Time } from '@internationalized/date';
</script>

<TimeField value={new Time(14, 15)} disabled />
<TimeField value={new Time(14, 15)} readonly />

<script lang="ts">
  import { TimeField, FormField } from 'sv5ui';
  import type { TimeValue } from 'bits-ui';

  let time = $state<TimeValue | undefined>(undefined);
  const error = $derived(time ? '' : 'Please pick a time');
</script>

<FormField label="Start time" {error}>
  <TimeField bind:value={time} name="startTime" />
</FormField>