Time

A time picker input that uses the browser's native time control. Supports minTime / maxTime constraints and timeFormat preference (12h / 24h).

Schema Example

timejson

{
  id: "preferred-time",
  type: "time",
  label: "Preferred contact time",
  required: true,
  minTime: "09:00",
  maxTime: "17:00",
  timeFormat: "24h"
}

Available Options

Property	Type	Description
label	string	The question text displayed to the user.
timeFormat	"12h" \| "24h"	Time display format. Defaults to `"24h"`.
minTime	string	Minimum selectable time in HH:MM format (e.g. `"09:00"`).
maxTime	string	Maximum selectable time in HH:MM format (e.g. `"17:00"`).
required	boolean	Whether a time must be selected.
defaultValue	string	Default time in HH:MM format.
description	string	Optional helper text displayed below the label.
visibleIf	string	Conditional expression to show/hide this question.
validation	ValidationRule[]	Custom validation rules. Supports the built-in `time` rule type.

With Validation

Time with validationjson

{
  id: "call-time",
  type: "time",
  label: "What time should we call you?",
  required: true,
  minTime: "08:00",
  maxTime: "20:00",
  validation: [
    { type: "time", message: "Please enter a valid time" }
  ]
}

Answer Format

Returns a string in HH:MM format (e.g. "14:30").

Practical Example

Advanced Example

A meeting scheduler with time constraints:

MeetingScheduler.tsxtsx

import { SurveyRenderer } from 'react-minimal-survey-builder';
import type { SurveySchema } from 'react-minimal-survey-builder';

const schedulerSchema: SurveySchema = {
  id: 'meeting-scheduler',
  title: 'Schedule a Meeting',
  pages: [
    {
      id: 'timing',
      questions: [
        {
          id: 'name',
          type: 'text',
          label: 'Your name',
          required: true,
        },
        {
          id: 'meeting-date',
          type: 'date',
          label: 'Preferred date',
          required: true,
        },
        {
          id: 'start-time',
          type: 'time',
          label: 'Start time',
          required: true,
          minTime: '09:00',
          maxTime: '17:00',
          description: 'Business hours only (9 AM - 5 PM)',
        },
        {
          id: 'duration',
          type: 'select',
          label: 'Meeting duration',
          required: true,
          options: [
            { label: '15 minutes', value: '15' },
            { label: '30 minutes', value: '30' },
            { label: '1 hour', value: '60' },
          ],
        },
      ],
    },
  ],
  settings: { submitText: 'Book Meeting' },
};

function MeetingScheduler() {
  return (
    <SurveyRenderer
      schema={schedulerSchema}
      options={{
        onSubmit: async (answers) => {
          // answers['start-time'] → "14:30"
          console.log('Meeting booked:', answers);
        },
      }}
    />
  );
}