Input Time

Input Time хранит строку HH:mm либо пустоту и разделяет часы с минутами на клавиатурные сегменты. Формат всегда 24-часовой: секунды, AM/PM и произвольный placeholder в контракт не входят.

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

Нужно ввести точное время события в пределах суток.
Пользователь должен менять часы и минуты независимо с клавиатуры.
Форма хранит время без даты, часового пояса и секунд.

Не использовать:

Нужны начало и окончание одного интервала — используй Input Time Range.
Значение означает длительность, а не время суток — используй Input Number с явной единицей.
Время нельзя отделить от календарной даты — используй компонент с датой и временем.

Альтернативы:

input-time-range — две связанные границы одного внутрисуточного интервала
input-number — числовая длительность или количество единиц времени

Базовый

Заполненное и пустое время с одной строковой моделью HH:mm.

Начало встречи

0930

Необязательное время

––––

Начало: 09:30

<!--
  🟢

  Базовый пример Input Time сравнивает заполненное и пустое время. Обе модели
  остаются строками HH:mm и меняются через сегменты часов и минут.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import InputTime from "$lib/ui/InputTime.svelte";

let meeting = $state("09:30");
let optional = $state("");
</script>

<div style="display: grid; gap: var(--sp-3); width: var(--control-field-min);">
	<InputTime label={t("Начало встречи")} bind:value={meeting} />
	<InputTime label={t("Необязательное время")} bind:value={optional} />
	<p>{t("Начало:")} {meeting || t("не выбрано")}</p>
</div>

Границы

Min и max ограничивают допустимое время, не меняя точность до минуты.

Открытие

0900

Закрытие

1730

<!--
  🟢

  Пример границ ограничивает Input Time рабочим окном. Min и max проверяют
  полное время, но не добавляют секунды и не меняют 24-часовой формат.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import InputTime from "$lib/ui/InputTime.svelte";

let opening = $state("09:00");
let closing = $state("17:30");
</script>

<div style="display: grid; gap: var(--sp-3); width: var(--control-field-min);">
	<InputTime
		label={t("Открытие")}
		min="09:00"
		max="18:00"
		bind:value={opening}
	/>
	<InputTime
		label={t("Закрытие")}
		min="09:00"
		max="18:00"
		bind:value={closing}
	/>
</div>

Поле

Размеры, подсказка, сообщения, required и readonly в форме.

Время доставки

1415

Укажите время с точностью до минуты.

Время звонка

––––

Укажите время звонка.

Начало отчёта

0845

<!--
  🟢

  Пример поля Input Time собирает размеры, подсказку, сообщения и form-name.
  Ошибка относится ко времени целиком, а readonly сохраняет читаемые сегменты.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import InputTime from "$lib/ui/InputTime.svelte";

let delivery = $state("14:15");
let missing = $state("");
</script>

<div style="display: grid; gap: var(--sp-3); width: var(--control-field-min);">
	<InputTime
		label={t("Время доставки")}
		hint={t("Интервал уточнит оператор")}
		description={t("Укажите время с точностью до минуты.")}
		name="delivery-time"
		required
		bind:value={delivery}
	/>
	<InputTime
		label={t("Время звонка")}
		error={t("Укажите время звонка.")}
		bind:value={missing}
	/>
	<InputTime label={t("Начало отчёта")} value="08:45" size="s" readonly />
</div>