Time Input

A typeable, segmented time field (hour : minute [: second] [AM/PM]).

Real use · 12h field (type digits, arrows, or paste 'e.g. 2:30 PM')

14:30 (24h)

24h + seconds

Sizes / disabled

Using Time Input

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { TimeInput } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
value	TimeValue \| null	no	Controlled value. null clears the field.
defaultValue	TimeValue \| null	no	—
onValueChange	(value: TimeValue \| null) => void	no	Fires once hour+minute (+AM/PM, in 12h mode) are filled; null while incomplete/cleared.
hourCycle	12 \| 24	no	12 or 24. Default: derived from locale.
showSeconds	boolean	no	Add a seconds segment. Default false.
locale	string	no	BCP-47 locale — drives the default hourCycle when not set explicitly.
disabled	boolean	no	—
color	TimeInputColor	no	—
size	TimeInputSize	no	—
className	string	no	—
id	string	no	—
"aria-label"	string	no	—

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { TimeInput, type TimeValue } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function TimeInputDemo() {
    const [time, setTime] = useState<TimeValue | null>({ hour: 14, minute: 30 });

    return (
        <>
            <Section title="Real use · 12h field (type digits, arrows, or paste 'e.g. 2:30 PM')">
                <TimeInput value={time} onValueChange={setTime} color="primary" />
                <p className="mt-2 text-sm opacity-70">
                    {time ? `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")} (24h)` : "No time"}
                </p>
            </Section>

            <Section title="24h + seconds">
                <TimeInput hourCycle={24} showSeconds defaultValue={{ hour: 14, minute: 30, second: 45 }} />
            </Section>

            <Section title="Sizes / disabled">
                <Row>
                    <TimeInput size="sm" defaultValue={{ hour: 9, minute: 0 }} />
                    <TimeInput size="md" defaultValue={{ hour: 9, minute: 0 }} />
                    <TimeInput size="lg" defaultValue={{ hour: 9, minute: 0 }} />
                    <TimeInput disabled defaultValue={{ hour: 9, minute: 0 }} />
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

The framework-neutral form of Time Input. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("TimeInput", undefined, { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "… …-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: date-segment

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.

The full API for Time Input, on every path, is available through the Silica MCP server.