Timecode field

Edits hours, minutes, seconds, and frames with native form validation for a supplied integer non-drop frame rate.

Preview

In point

24 fps, non-drop. Hours:minutes:seconds:frames.

In action

Set the edit boundary

Sequence · 24 fps

In point

24 fps, non-drop. Hours:minutes:seconds:frames.

When to use

Use it for

Integer non-drop rates from 1 through 99, supplied explicitly by the application.
Two-digit hours, minutes, seconds, and frames separated by colons.
onValueChange receives editable text, including incomplete input; check native validity before committing.

Not for

Drop-frame, fractional frame rates, or automatic conversion between timecode standards.
Coercing invalid frame numbers into a different timestamp without user intent.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { TimecodeField } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/timecode-field.

2. Vendor the source

npx @noorddev/vlak-cli add timecode-field

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/timecode-field.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { TimecodeField } from "@noorddev/vlak-react";

<TimecodeField label="In point" name="inPoint" frameRate={24} defaultValue="00:01:24:12" required />

Props

TimecodeField

Editable hours, minutes, seconds and frames for integer non-drop timecode.

Prop	Type	Default	Description
`label`required	`ReactNode`
`frameRate`required	`number`		Integer non-drop frame rate from 1 to 99.
`value`	`string`
`defaultValue`	`string`	`""`
`onValueChange`	`(value: string) => void`		Receives editable text, including incomplete or invalid input.

Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "pattern">.

Keyboard

Keys	Does
`Tab`	Focuses the native text input.
`Text editing keys`	Edits and selects timecode text using native input behavior.

Accessibility

A visible label names the input, and the frame-rate hint or validation error is linked as its description.
The format pattern and custom validity reject out-of-range frames and unsupported rates; required uses native form validation.
A 44px input target and focus ring accompany aria-invalid on invalid timecode.
The ref and native input attributes reach the input; uncontrolled form reset restores the default text.

Markup

<div class="rs-timecode-field"><label class="rs-timecode-field-label" for="in-point">In point</label><input class="rs-input rs-input-full rs-timecode-field-input" id="in-point" type="text" value="00:01:24:12" pattern="[0-9]{2}:[0-5][0-9]:[0-5][0-9]:[0-9]{2}" aria-describedby="in-point-hint" /><p class="rs-timecode-field-hint" id="in-point-hint">24 fps, non-drop. Hours:minutes:seconds:frames.</p></div>

Classes

.rs-timecode-field.rs-timecode-field-label.rs-timecode-field-input.rs-timecode-field-hint

Depends on

/input