Time Field

Ввод времени по сегментам, 24 часа или AM/PM. Бесплатно, MIT · Формы и ввод › Дата и время

Установка

npx valyro-cli@latest add time-field

npx shadcn@latest add https://valyro.xyz/r/time-field.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { TimeField } from 'valyro-ui';

Prop	Type	Default
`value`	`string \| null`		24-hour "HH:mm".
`defaultValue`	`string \| null`	`null`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string \| null) => void`		Called with "HH:mm" once every segment is filled, and with null when one is cleared.
`hourCycle`	`12 \| 24`		12 (with an AM/PM segment) or 24. Defaults to the locale's clock: 12 in en-US, 24 in most of Europe.
`locale`	`string`		Order of the segments, the digits and the AM/PM names. Defaults to the `ThemeProvider` locale, then the browser's.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field height and text size.
`disabled`	`boolean`	`false`	Takes the segments out of the Tab order and leaves the time out of form data.
`readOnly`	`boolean`	`false`	Focusable and readable, not editable.
`invalid`	`boolean`	`false`	Danger border and aria-invalid. Also shown after a submit attempt while a required time is missing.
`name`	`string`		Submits the time with the surrounding form as 24-hour `HH:mm` (empty when incomplete).
`required`	`boolean`		Blocks native form submission while the time is incomplete; aria-required on the segments.
`icon`	`ReactNode`	`<ClockIcon />`	Icon before the segments; `null` for none. Default: a clock.
`labels`	`Partial<TimeFieldLabels>`		Overrides for the built-in English text; keys left out keep their defaults.