Time Input
Time Input lets users pick a time with segmented fields and a scroll wheel popover.
pnpm dlx dreamy add time-inputClick the control to open the time popover. Focus starts on the first field so you can type immediately. Use up and down arrows to change the focused segment, and left and right arrows to move between fields.
<TimeInput.AIO />Pass hour12 to show an AM/PM segment and 1-12 hour wheel (only when hour is included in fields).
<TimeInput.AIO hour12 />Use fields to choose any combination of hour, minute, second, and millisecond. Order is always normalized to hour → minute → second → millisecond. The string value format follows the active fields.
<TimeInput.AIO defaultValue="14:30:45" fields={["hour", "minute", "second"]} hour12 />
<TimeInput.AIO
defaultValue="14:30:45.100"
fields={["hour", "minute", "second", "millisecond"]}
millisecondStep={100}
/>
<TimeInput.AIO defaultValue="05:30" fields={["minute", "second"]} />
<TimeInput.AIO defaultValue="45.250" fields={["second", "millisecond"]} millisecondStep={50} />The value string matches the active fields (for example "HH:mm", "HH:mm:ss", or "ss.SSS"), even when hour12 is enabled.
const [value, setValue] = useState("14:30");
<TimeInput.AIO hour12 value={value} onChange={setValue} /><TimeInput.AIO size="sm" hour12 />
<TimeInput.AIO size="md" hour12 />
<TimeInput.AIO size="lg" hour12 /><TimeInput.AIO variant="outline" hour12 />
<TimeInput.AIO variant="solid" hour12 />
<TimeInput.AIO variant="filledOutline" hour12 />Use minuteStep, secondStep, and millisecondStep to snap each field (for example every 5 minutes or every 100ms). Prefer a larger millisecondStep when showing milliseconds so the wheel stays usable.
<TimeInput.AIO defaultValue="09:00" hour12 minuteStep={5} />
<TimeInput.AIO
defaultValue="14:30:00.000"
fields={["hour", "minute", "second", "millisecond"]}
millisecondStep={100}
/>Compose the parts yourself when you need custom layout.
<TimeInput.Root defaultValue="16:45:00" fields={["hour", "minute", "second"]} hour12>
<TimeInput.Trigger />
<TimeInput.Content>
<TimeInput.Columns />
</TimeInput.Content>
</TimeInput.Root><Field.Root>
<Field.Label>Appointment time</Field.Label>
<TimeInput.AIO hour12 name="appointmentTime" />
<Field.Hint>Scroll the wheels or type each segment</Field.Hint>
</Field.Root>Use popoverProps on TimeInput.Root to forward behavior props to the internal Popover . Keep placement on the root positioning prop.
<TimeInput.Root hour12 popoverProps={{ closeOnBlur: false }}>
<TimeInput.Trigger />
<TimeInput.Content>
<TimeInput.Columns />
</TimeInput.Content>
</TimeInput.Root>