Time Input

Overview

The TimeInput component provides a styled time input field. It is built on top of BaseInput, using the same cn-input-container foundation as TextInput and NumberInput, and hides the browser’s native clock indicator in favour of a configurable IconV2 leading icon.

Variations

Icon

The leading icon defaults to clock. Pass any IconV2 name via the icon prop, or pass undefined to hide the icon entirely.

Form states

TimeInput accepts all standard form field props via CommonInputsProp — label, caption, error, warning, and optional.

Disabled & read-only

Controlled

Pass value together with onChange to control the input. onChange receives the change event — read e.target.value for the new time.

Installation

import { TimeInput } from "@harnessio/ui/components";

<TimeInput
  label="Start time"
  id="start-time"
  defaultValue="09:30"
  caption="Select a time"
/>;

Usage

Anatomy

TimeInput composes a label, the time field, and a caption inside a control group, and is built on BaseInput.

• The label renders above (or beside, when orientation="horizontal") the input. tooltipContent adds an info icon with a tooltip next to the label, and labelSuffix adds a custom element on the right of the label.
• The field is a native <input type="time"> inside a cn-input-container. A configurable IconV2 leading icon (default clock) sits over the left of the input; pass icon={undefined} to remove it.
• Below the input, a caption area shows the error message (in the danger theme), then the warning message (in the warning theme), otherwise the plain caption.
• Every input gets an id; if you don’t provide one it’s generated automatically and used to associate the label. The component forwards its ref to the underlying <input>.

Note

error and warning drive the theme automatically: error forces the danger theme and warning forces the warning theme (error taking precedence), overriding any theme you set.

Best practices

Do

• Always provide a label (or an aria-label) so the field’s purpose is clear.
• Use step={1} when seconds matter; otherwise leave it off so the field shows only hours and minutes.
• Use error for validation messages — it both shows the message and switches the field to the danger theme.
• Add optional to fields that aren’t required so the required * marker reflects reality.

Don’t

• Don’t remove the leading icon (icon={undefined}) unless the field’s purpose is obvious from its label and surroundings — the icon is a helpful affordance.
• Don’t rely on the placeholder to explain the expected format; the native time control manages its own display.

Accessibility

Labeling

• The label is associated with the input through a shared id (auto-generated when omitted), so clicking the label focuses the field.
• When there’s no visible label, provide an aria-label.
• The leading icon is decorative (pointer-events-none) and does not receive focus.

Focus & states

• disabled removes the field from the tab order; readOnly keeps it focusable but non-editable.
• error applies the danger theme and renders the message beneath the field so the validation state is both visible and adjacent to the input.

Properties

Properties

Prop	Required	Default	Type
icon	false	'clock'	IconName | undefined
label	false		string
caption	false		string
error	false		string
warning	false		string
optional	false	false	boolean
theme	false	'default'	'default' | 'success' | 'danger' | 'warning'
size	false	'md'	'md' | 'sm'
orientation	false	'vertical'	'vertical' | 'horizontal'
step	false		number
value	false		string
defaultValue	false		string
onChange	false		React.ChangeEventHandler<HTMLInputElement>
disabled	false	false	boolean
readOnly	false	false	boolean
id	false		string
tooltipContent	false		Exclude<ReactNode, boolean | null | undefined>
tooltipProps	false		IconWithTooltipProps
labelSuffix	false		ReactNode
className	false		string
inputContainerClassName	false		string
wrapperClassName	false		string

Note

TimeInput also accepts standard <input> attributes (such as name, min, max, required, onFocus, onBlur), which are forwarded to the underlying time input, and forwards its ref to that input.