TimeSelect

A time input component that uses a combobox for selecting time. Supports keyboard input in HH:mm format (with automatic formatting) and visual selection from a filtered list of available times.

Demo

React

Vue

Usage

React

import { useState } from 'react';
import { TimeSelect } from '@/react/time_select';

export const Demo = () => {
  const [value, setValue] = useState<string>('');

  return (
    <TimeSelect
      value={value}
      onChange={setValue}
    />
  );
};

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { TimeSelect } from '@/vue/time_select';

const value = ref<string>('');
</script>

<template>
  <TimeSelect
    v-model="value"
  />
</template>

Props

React

Name	Type	Default	Description
value	string	—	Current time value in HH:mm format (e.g., “14:30”)
onChange	(value: string) => void	—	Callback when value changes
placeholder	string	"HH:mm"	Placeholder text
start	string	"08:00"	Start time in HH:mm format
end	string	"19:00"	End time in HH:mm format
step	string	"00:30"	Time step in HH:mm format or minutes (e.g., “00:15” or “15”)
disabled	boolean	false	Disable the component

Vue

Name	Type	Default	Description
model-value	string	—	Current time value in HH:mm format (e.g., “14:30”) 1
placeholder	string	"HH:mm"	Placeholder text
start	string	"08:00"	Start time in HH:mm format
end	string	"19:00"	End time in HH:mm format
step	string	"00:30"	Time step in HH:mm format or minutes (e.g., “00:15” or “15”)
disabled	boolean	false	Disable the component

1. Can be used with the v-model directive for two-way binding.

Examples

Custom Time Range

React

<TimeSelect
  value={value}
  onChange={setValue}
  start="09:00"
  end="17:00"
  step="01:00"
  placeholder="Business hours"
/>

Vue

<TimeSelect
  v-model="value"
  start="09:00"
  end="17:00"
  step="01:00"
  placeholder="Business hours"
/>

Full Day with 15-minute Steps

React

<TimeSelect
  value={value}
  onChange={setValue}
  start="00:00"
  end="23:59"
  step="00:15"
/>

Vue

<TimeSelect
  v-model="value"
  start="00:00"
  end="23:59"
  step="00:15"
/>

The component automatically formats input as you type and filters the available time options based on the input. Times are generated from start to end with the specified step interval.