TimeInput

TimeInput captures single times or ranges with segmented keyboard-friendly fields.

import TimeInput from '@/components/ui/time-input';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add TimeInput

pnpm dlx @nateui/cli@latest add TimeInput

yarn dlx @nateui/cli@latest add TimeInput

Examples

Basic

import TimeInput from '@/components/ui/time-input';

export default function BasicDemo() {
  return (

Time Range Input

import dayjs from 'dayjs';
import TimeInput from '@/components/ui/time-input';

export default function TimeRangeInputDemo() {

Controlled

import { useState } from 'react';
import dayjs from 'dayjs';
import TimeInput from '@/components/ui/time-input';

Seconds

import TimeInput from '@/components/ui/time-input';

export default function SecondsDemo() {
  return (

AM PM

import TimeInput from '@/components/ui/time-input';

export default function AmPmDemo() {
  return (

Sizes

import TimeInput from '@/components/ui/time-input';

export default function SizesDemo() {
  return (

Disabled

import TimeInput from '@/components/ui/time-input';

export default function DisabledDemo() {
  return (

Affix

import TimeInput from '@/components/ui/time-input';

export default function AffixDemo() {
  return (

Invalid

import TimeInput from '@/components/ui/time-input';

export default function InvalidDemo() {
  return (

API

TimeInput uses separate fields for hours, minutes, optional seconds, and optional AM/PM. Arrow keys increment or decrement the focused segment.

TimeInput

Prop	Description	Type	Default
`amLabel`	Text accepted and displayed for AM in 12-hour mode.	`string`	`'am'`
`amPmPlaceholder`	Placeholder for the AM/PM field.	`string`	`'am'`
`clearable`	Shows a clear button after a value exists.	`boolean`	`true`
`defaultValue`	Initial uncontrolled value.	`TimeInputValue`	-
`disabled`	Disables every time segment and wrapper interaction.	`boolean`	`false`
`embedded`	Renders only the inner time fields, without `InputWrapper`.	`boolean`	`false`
`format`	Selects 12-hour or 24-hour fields.	`TimeInputFormat`	`'24'`
`id`	Id used for the first time field.	`string`	generated
`invalid`	Applies invalid input styling.	`boolean`	-
`name`	Name applied to the hours field.	`string`	-
`nextRef`	Field to focus after the final time segment.	`RefObject<HTMLInputElement \| null>`	-
`onChange`	Called with the next date value, or `null` after clear.	`TimeInputChangeHandler`	-
`pmLabel`	Text accepted and displayed for PM in 12-hour mode.	`string`	`'pm'`
`prefix`	Prefix content rendered inside the input wrapper.	`string \| ReactNode`	-
`ref`	Ref forwarded to the first time field.	`Ref<HTMLInputElement>`	-
`showSeconds`	Adds a seconds field after minutes.	`boolean`	`false`
`size`	Input wrapper size.	`ControlSize`	`'md'`
`suffix`	Suffix content rendered inside the input wrapper.	`string \| ReactNode`	clock icon
`timeFieldClass`	Class names applied to each time segment field.	`string`	-
`timeFieldPlaceholder`	Placeholder for hour, minute, and second fields.	`string`	`'--'`
`value`	Controlled value.	`TimeInputValue`	-
`...nativeProps`	Native props for the wrapper span.	`ComponentPropsWithRef<'span'>`	-

TimeInput.TimeInputRange

Prop	Description	Type	Default
`amPmPlaceholder`	Placeholder for each AM/PM field.	`string`	`'am'`
`clearable`	Shows a clear button for the range.	`boolean`	`false`
`defaultValue`	Initial uncontrolled start and end values.	`TimeInputRangeValue`	`[null, null]`
`disabled`	Disables both time inputs.	`boolean`	`false`
`format`	Selects 12-hour or 24-hour fields.	`TimeInputFormat`	`'24'`
`id`	Id used for the first range field.	`string`	generated
`invalid`	Applies invalid input styling.	`boolean`	-
`name`	Name applied to the first range field.	`string`	-
`onChange`	Called with the next `[start, end]` range.	`TimeInputRangeChangeHandler`	-
`prefix`	Prefix content rendered inside the range wrapper.	`string \| ReactNode`	-
`ref`	Ref forwarded to the first time field.	`Ref<HTMLInputElement>`	-
`seperator`	Text rendered between the start and end fields.	`string`	`'~'`
`showSeconds`	Adds seconds fields to both start and end inputs.	`boolean`	`false`
`size`	Input wrapper size.	`ControlSize`	`'md'`
`suffix`	Suffix content rendered inside the range wrapper.	`string \| ReactNode`	clock icon
`timeFieldClass`	Class names applied to each time segment field.	`string`	-
`timeFieldPlaceholder`	Placeholder for hour, minute, and second fields.	`string`	`'--'`
`value`	Controlled range value.	`TimeInputRangeValue`	-
`...nativeProps`	Native props for the wrapper span.	`ComponentPropsWithRef<'span'>`	-

Types

type TimeInputValue = Date | null;
type TimeInputRangeValue = [Date | null, Date | null];
type TimeInputFormat = '12' | '24';
type ControlSize = 'sm' | 'md' | 'lg';
type TimeInputChangeHandler = (value: TimeInputValue) => void;
type TimeInputRangeChangeHandler = (value: TimeInputRangeValue) => void;