TimeField

TimeField renders an <input type="time"> and emits the selected value as a string in HH:mm or HH:mm:ss format depending on the browser and step. The step prop controls the time interval between selectable values (in seconds).

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | No | — | Current time value in HH:mm or HH:mm:ss format. | | onChange | (value: string) => void | Yes | — | Called with the new time string when the user changes the value. | | label | string | No | — | Label rendered above the input. | | description | string | No | — | Helper text rendered below the input. | | step | number | No | — | Interval in seconds between selectable time values (e.g. 60 for 1-minute intervals, 1800 for 30-minute intervals). | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | inputStyle | React.CSSProperties | No | — | Styles applied directly to the <input> element. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the root container. | | id | string | No | — | id attribute on the root container. |

Usage

Basic

import React, { useState } from 'react';
import TimeField from '@/components/fields/TimeField';

export default function Example() {
  const [time, setTime] = useState('');

  return (
    <TimeField
      label="Start time"
      value={time}
      onChange={setTime}
    />
  );
}

With 30-minute step intervals

<TimeField
  label="Appointment time"
  value={appointmentTime}
  onChange={setAppointmentTime}
  step={1800}
  description="Select a time in 30-minute intervals."
/>