Skip to main content

TimeField

Description​

A time picker input field component that integrates with React Hook Form. Provides a native time picker interface with min/max validation and step control.

Import​

import { TimeField } from '@components/common/form/TimeField';

Usage​

import { Form } from '@components/common/form/Form';
import { TimeField } from '@components/common/form/TimeField';

function ScheduleForm() {
  return (
    <Form action="/api/schedule">
      <TimeField
        name="openingTime"
        label="Opening Time"
        required
      />
    </Form>
  );
}

Props​

NameTypeDefaultDescription
nameFieldPath<T>-Field name (required)
labelstring-Label text displayed above the input
minstring-Minimum allowed time (HH:mm format)
maxstring-Maximum allowed time (HH:mm format)
stepnumber-Step interval in seconds
requiredbooleanfalseMakes the field required
errorstring-Custom error message
helperTextstring-Helper text shown in a tooltip
validationRegisterOptions<T>-React Hook Form validation rules
wrapperClassNamestring-CSS class for the wrapper div
...propsInputHTMLAttributes-All standard HTML input attributes

Example: Business Hours​

import { Form } from '@components/common/form/Form';
import { TimeField } from '@components/common/form/TimeField';

function BusinessHoursForm() {
  return (
    <Form action="/api/business-hours">
      <TimeField
        name="openTime"
        label="Opening Time"
        min="06:00"
        max="12:00"
        step={1800} // 30 minute intervals
        required
      />
      
      <TimeField
        name="closeTime"
        label="Closing Time"
        min="12:00"
        max="23:00"
        step={1800}
        required
        validation={{
          validate: (value, formValues) => {
            if (!value || !formValues.openTime) return true;
            return value > formValues.openTime || 'Closing time must be after opening time';
          }
        }}
      />
    </Form>
  );
}

Example: Alarm Time​

import { Form } from '@components/common/form/Form';
import { TimeField } from '@components/common/form/TimeField';

function AlarmForm() {
  return (
    <Form action="/api/alarms">
      <TimeField
        name="alarmTime"
        label="Wake Up Time"
        defaultValue="07:00"
        step={300} // 5 minute intervals
        required
        helperText="Set your daily alarm time"
      />
    </Form>
  );
}

Features​

  • Native Time Picker: Uses browser's native time picker
  • Min/Max Validation: Built-in validation for time ranges
  • Step Control: Control time interval precision (in seconds)
  • 24-Hour Format: Uses HH:mm 24-hour format
  • TypeScript Support: Full type safety with generics

Time Format​

Values are in HH:mm format (24-hour time string).

Step Values​

  • 60 - 1 minute intervals
  • 300 - 5 minute intervals
  • 900 - 15 minute intervals
  • 1800 - 30 minute intervals
  • 3600 - 1 hour intervals