CSSN'T Components

TimePicker Examples

Copy-ready examples with live previews.

Controlled value (recommended)

The committed value is controlled by your state. Changes are emitted only on OK.

Live preview

Committed value: 09:30

timerTime

Note: onChange fires only when the user presses OK inside the picker.

import { useState } from "react";
import TimePicker from "@/packages/ui/src/_components/timepicker/Timepicker";
import type { TimeValue } from "@/packages/ui/src/_components/timepicker/Timepicker.type";

export default function Example() {
  const [value, setValue] = useState<TimeValue | null>({ hour: 9, minute: 30 });

  return (
    <TimePicker
      label="Time"
      value={value}
      onChange={setValue}
    />
  );
}

Controlled open + layout / format

Drive the popover open state yourself and switch to 24h + horizontal panel.

Live preview

open: false | committed: null

timerSchedule

import { useState } from "react";
import TimePicker from "@/packages/ui/src/_components/timepicker/Timepicker";
import type { TimeValue } from "@/packages/ui/src/_components/timepicker/Timepicker.type";

export default function Example() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState<TimeValue | null | undefined>(undefined);

  return (
    <TimePicker
      label="Schedule"
      open={open}
      onOpenChange={setOpen}
      value={value}
      onChange={setValue}
      format="24h"
      orientation="horizontal"
    />
  );
}

initialValue

Provide a default draft when the picker is first used.

Live preview

committed: null

timerStarts at

initialValue is used only when value is undefined on first render. Once controlled, updates come from value.

import { useState } from "react";
import TimePicker from "@/packages/ui/src/_components/timepicker/Timepicker";
import type { TimeValue } from "@/packages/ui/src/_components/timepicker/Timepicker.type";

export default function Example() {
  const [value, setValue] = useState<TimeValue | null | undefined>(undefined);

  return (
    <TimePicker
      label="Starts at"
      value={value}
      onChange={setValue}
      initialValue={{ hour: 8, minute: 0 }}
    />
  );
}

Customize trigger input

Pass inputProps to the trigger input (placeholder, helper text, icons, etc.).

Live preview

timerReminder

Press OK to commit

You can pass inputProps to customize the trigger input (excluding label/value/onChange/type).

import { useState } from "react";
import TimePicker from "@/packages/ui/src/_components/timepicker/Timepicker";
import type { TimeValue } from "@/packages/ui/src/_components/timepicker/Timepicker.type";

export default function Example() {
  const [value, setValue] = useState<TimeValue | null>({ hour: 10, minute: 45 });

  return (
    <TimePicker
      label="Reminder"
      value={value}
      onChange={setValue}
      inputProps={{
        placeholder: "Pick a time",
        extraText: "Press OK to commit",
      }}
    />
  );
}

TimePicker Props

Time picker with a trigger input + popover panel (dial view + optional text input view).

onChange is only fired when the user presses OK in the picker panel. Until then, edits are kept in an internal draft state.

Cancel resets the draft back to props.value (or null) and closes the panel.

TimeValue uses 24-hour storage: hour is 0-23 and minute is 0-59 (the UI converts as needed for 12h).

Open can be controlled (open + onOpenChange) or uncontrolled (internal state).

CSS state classes are built on the root: cssnt-timepicker + is-open + is-dial/is-input + is-12h/is-24h + is-vertical/is-horizontal.

TimePicker props
Prop	Type	Required	Default	Description
value	TimeValue \| null	No	n/a	Controlled value (recommended). When it changes, the internal draft syncs to it.
onChange	(next: TimeValue \| null) => void	No	n/a	Called on OK with a normalized value, or null.
open	boolean	No	n/a	Controlled open state. If omitted, the component manages its own open state.
onOpenChange	(open: boolean) => void	No	n/a	Notified on open/close actions. If open is uncontrolled, it also drives internal state.
label	string	No	"Time"	Label shown in the trigger.
format	"12h" \| "24h"	No	"12h"	Time format. In 12h, the UI supports AM/PM. (Values: 12h, 24h)
orientation	"vertical" \| "horizontal"	No	"vertical"	Layout direction for the picker panel. (Values: vertical, horizontal)
initialValue	TimeValue	No	n/a	Initial draft when value is not provided (first render only).
inputProps	Omit<IInputProps, "label" \| "value" \| "onChange" \| "type">	No	n/a	Props merged into the trigger input (excluding the listed keys).
className	string	No	n/a	Extra className appended to the picker container root.
customStyles	React.CSSProperties	No	n/a	Inline styles applied to the picker container.