Time input
The kit input as a time field, with the browser’s time semantics.
On this page
Code
import { TimeInput } from "@bosunkit/components/time-input";
import type { ReactElement } from "react";
export const description: string =
"A time field in the kit's frame; the time's reference — UTC, local — is said beside it, never inside.";
export default function Arrival(): ReactElement {
return <TimeInput aria-label="Arrival time" defaultValue="12:04" />;
}
Clock time and its reference
TimeInput wraps the native time field. The browser chooses its visible entry UI; its value is a normalized
clock-time string such as 06:30, with seconds when the configured step requires them. Empty input remains
empty. The component does not add a date, time zone or conversion.
For a time in a form, use the time picker: an outlined field that reads a time as the crew type it and opens hour and minute lists driven by the keys, keeping the browser's own field for a finger.
Put the time reference in the visible label or adjacent text. For an arrival instant, collect the date as
well as the clock time; a time near midnight is ambiguous without both. Use a duration field for elapsed time.
min, max, step and required describe native constraints, while application validation owns the scheduling
rules and any time-zone ambiguity. Preserve the draft and explain a rejected value beside the field.
UTC. The date is collected separately.
UTC. This example is read-only.
Native time-entry behavior is described in MDN's time input reference.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | – | Additional input classes. |
| ref | Ref<HTMLInputElement> | undefined | – | The input element. |
| icon | ReactNode | undefined | – | An icon inside the field's left edge, before the text, such as a magnifier on a search field. It is decorative: the field's label says what it is for. |
| unit | string | undefined | – | The unit of the value, inside the field's right edge (m, kn, °T), as SN.1/Circ.243 writes it. It is read
after the value, through aria-describedby, so the field's name need not repeat it. |
| onValueChange | ((value: string, eventDetails: Input.ChangeEventDetails) => void) | undefined | – | Callback fired when the value changes. Use when controlled. |
| defaultValue | Field.Control.Props['defaultValue'] | undefined | – | The default value of the input. Use when uncontrolled. |
| value | React.ComponentProps<'input'>['value'] | undefined | – | The value of the input. Use when controlled. |
| render | React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined | – | Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a ReactElement or a function that returns the element to render. |
| style | React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined | – | Style applied to the element, or a function that returns a style object based on the component's state. |
Also takes every attribute of Omit<InputProps, "type">.
Related
- Time picker: a time typed or chosen from hour and minute lists.
- Form field: visible labels, hints and validation associations.
- Interaction states: pending, disabled, read-only and invalid behavior.
- Content: names, quantities and useful messages.