Component reference
TimePicker
Choose a booking time with visible selection feedback.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Book a delivery slot
Slots run every 15 minutes between 09:00 and 17:30. The field uses the native time input, so its 12- or 24-hour rendering follows the browser locale.
The 12- or 24-hour display follows the browser locale.
The clear button resets the slot.
Width adapts to the available space
"use client";
import { useState } from "react";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
TimePicker,
Badge,
Button
} from "@pimolu/react";
function BookingTime() {
const [time, setTime] = useState<string | null>("10:00");
return (
<Card>
<CardHeader>
<CardTitle>Book a delivery slot</CardTitle>
<CardDescription>
Slots run every 15 minutes between 09:00 and 17:30. The field
uses the native time input, so its 12- or 24-hour rendering
follows the browser locale.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-5 min-w-0">
<TimePicker
label="Arrival time"
value={time}
onValueChange={setTime}
min="09:00"
max="17:30"
step={900}
fullWidth
showFormatHint
helperText="The clear button resets the slot."
/>
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Badge variant={time ? "primary" : "neutral"}>
{time ?? "No slot selected"}
</Badge>
<Button size="sm" disabled={!time}>Reserve slot</Button>
</div>
</div>
</CardContent>
</Card>
);
}
export function DemoExample() {
return (<BookingTime />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
sm, md and lg share the Input height scale.
Constraints
min, max and step are forwarded to the native control, which keeps invalid keyboard values out of the field. step is expressed in seconds.
Seconds and format
withSeconds keeps the seconds segment and defaults the step to one second. showFormatHint adds a note about the locale-driven 12/24-hour display.
Usage
Treat the result as a time value; combine it with a date and timezone deliberately.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluTimePickerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
value | string | null | undefined | — | Controlled time. Accepts `"HH:mm"`, or `"HH:mm:ss"` when `withSeconds` is set. `null` represents an empty field. |
defaultValue | string | null | undefined | — | Initial time when uncontrolled. |
onValueChange | ((value: string | null) => void) | undefined | — | Called with the next time string, or `null` when cleared. |
withSeconds | boolean | undefined | false | Show and accept seconds. Sets the default step to 1 second. |
min | string | undefined | — | Earliest selectable time. |
max | string | undefined | — | Latest selectable time. |
step | number | undefined | 60, or 1 with seconds | Granularity in seconds. Defaults to 60, or 1 with seconds. |
label | ReactNode | — | Visible label. |
helperText | ReactNode | — | Supporting text below the field. |
errorMessage | ReactNode | — | Error text, replacing the helper text. |
invalid | boolean | undefined | false | Invalid state without an error message. |
clearable | boolean | undefined | true | Render the clear button when a time is selected. Defaults to true. |
clearLabel | string | undefined | — | Accessible name of the clear button. |
showFormatHint | boolean | undefined | false | Explain that the 12- or 24-hour rendering follows the browser locale. Off by default because the note is often redundant in a form. |
formatHint | string | undefined | — | Overrides the default format hint text. |
size | PimoluTimePickerSize | undefined | "md" | Visual size. Defaults to "md". |
fullWidth | boolean | undefined | false | Stretch to the parent width. |
className | string | undefined | — | Class applied to the outer field. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLInputElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | — | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
required | boolean | undefined | — | Standard React/HTML attribute. |
valuestring | null | undefinedNo default extracted.
Controlled time. Accepts `"HH:mm"`, or `"HH:mm:ss"` when `withSeconds` is set. `null` represents an empty field.
defaultValuestring | null | undefinedNo default extracted.
Initial time when uncontrolled.
onValueChange((value: string | null) => void) | undefinedNo default extracted.
Called with the next time string, or `null` when cleared.
withSecondsboolean | undefinedDefault: false
Show and accept seconds. Sets the default step to 1 second.
minstring | undefinedNo default extracted.
Earliest selectable time.
maxstring | undefinedNo default extracted.
Latest selectable time.
stepnumber | undefinedDefault: 60, or 1 with seconds
Granularity in seconds. Defaults to 60, or 1 with seconds.
labelReactNodeNo default extracted.
Visible label.
helperTextReactNodeNo default extracted.
Supporting text below the field.
errorMessageReactNodeNo default extracted.
Error text, replacing the helper text.
invalidboolean | undefinedDefault: false
Invalid state without an error message.
clearableboolean | undefinedDefault: true
Render the clear button when a time is selected. Defaults to true.
clearLabelstring | undefinedNo default extracted.
Accessible name of the clear button.
showFormatHintboolean | undefinedDefault: false
Explain that the 12- or 24-hour rendering follows the browser locale. Off by default because the note is often redundant in a form.
formatHintstring | undefinedNo default extracted.
Overrides the default format hint text.
sizePimoluTimePickerSize | undefinedDefault: "md"
Visual size. Defaults to "md".
fullWidthboolean | undefinedDefault: false
Stretch to the parent width.
classNamestring | undefinedNo default extracted.
Class applied to the outer field.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLInputElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedNo default extracted.
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
requiredboolean | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Label hours/minutes, preserve keyboard editing and explain unavailable times in text.