TimeSelect

Use YhTimeSelect to choose from a predefined list of time slots. It fits appointment, scheduling, opening-hours, and other fixed-slot scenarios.

TimePicker vs TimeSelect

TimePicker: Select any arbitrary time through a spinner panel.
TimeSelect: Select from a predefined list of time options generated from rules or custom data.

Basic Usage

Configure the available options through start, end, and step.

Current value: Not selected

Basic Usage

Disabled State

Use disabled to make the whole control non-interactive.

09:00

Disabled State

Clearable

Set clearable to display a clear icon when a value exists.

10:30

Current value: 10:30

Clearable

Time Range Selection

Link two YhTimeSelect instances together with min-time and max-time.

Selected range: -- to --

Time Range Selection

Fixed Time Range

Define a fixed selectable range with start, end, and step.

Hours: 09:00 - 21:00, with 30-minute intervals

Fixed Time Range

Disabled Time Slots

Use disabled-hours to mark specific time ranges as unavailable.

Disabled: 12:00-13:30 and 18:00-19:00

Disabled Time Slots

minTime and maxTime Constraints

Use min-time and max-time to disable options outside the allowed range.

Selectable range: 09:00 - 18:00

minTime and maxTime Constraints

Different Sizes

Use size to switch between large, default, and small.

Different Sizes

Time Format

Set format to control the displayed label text of generated options.

Current value: Not selected

Time Format

Custom Time Options

Use options to provide a fully custom option list. When present, it takes precedence over start, end, and step.

Current value: Not selected

Custom Time Options

Full Feature Demo

This example combines editable filtering, clearing, custom intervals, and end-time inclusion.

Current choice: Not selected

Full Feature Demo

Use in Nuxt

YhTimeSelect can be used directly in Nuxt after registering the YH-UI module. The generated option list and current value render during SSR, while popup positioning, input filtering, and scrolling continue on the client after hydration.

Use in Nuxt

API

Props

Name	Description	Type	Default
model-value / v-model	Bound value	`string`	`undefined`
disabled	Whether the component is disabled	`boolean`	`false`
editable	Whether the input is editable and filterable	`boolean`	`true`
clearable	Whether the current value can be cleared	`boolean`	`true`
size	Input size	`'large' \| 'default' \| 'small'`	`undefined`
placeholder	Placeholder text	`string`	`''`
name	Native input name	`string`	`undefined`
effect	Dropdown visual theme	`'dark' \| 'light'`	`'light'`
prefix-icon	Declared prefix icon prop. The current template still renders the built-in clock icon and does not consume this prop	`string \| Component`	`undefined`
clear-icon	Declared clear icon prop. The current template still renders the built-in clear icon and does not consume this prop	`string \| Component`	`undefined`
start	Start time used to generate options	`string`	`'09:00'`
end	End time used to generate options	`string`	`'18:00'`
step	Time interval used to generate options	`string`	`'00:30'`
min-time	Minimum selectable time	`string`	`undefined`
max-time	Maximum selectable time	`string`	`undefined`
value-on-clear	Value emitted when cleared. Falls back to `undefined` when omitted	`string`	`undefined`
format	Display format for generated options	`string`	`'HH:mm'`
popper-class	Custom dropdown class name	`string`	`undefined`
popper-style	Declared dropdown style prop. The current implementation does not merge this prop into the dropdown styles	`string \| Record<string, string>`	`undefined`
teleported	Whether the dropdown is teleported to `body`	`boolean`	`true`
include-end-time	Compatibility prop for including the end option. The current implementation already includes the exact end time in generated lists	`boolean`	`false`
validate-event	Whether form validation is triggered on change and blur	`boolean`	`true`
options	Custom time option list	`YhTimeSelectOption[]`	`undefined`
disabled-hours	Disabled time ranges	`string[][]`	`undefined`
theme-overrides	Component-level theme overrides	`ComponentThemeVars`	`undefined`

Events

Name	Description	Parameters
update:modelValue	Triggered when the bound value updates	`(value: string \| undefined) => void`
change	Triggered when the selected value changes	`(value: string \| undefined) => void`
focus	Triggered when the input gains focus	`(event: FocusEvent) => void`
blur	Triggered when the input loses focus	`(event: FocusEvent) => void`
clear	Triggered when the clear icon is clicked	`() => void`
visible-change	Triggered when the dropdown visibility changes	`(visible: boolean) => void`

Slots

Name	Description	Parameters
prefix	Content rendered before the input	-
empty	Content rendered when no option is available	-
option	Custom option content	`{ option: YhTimeSelectOption }`

Expose

Name	Description	Type
focus	Focuses the input	`() => void`
blur	Blurs the input	`() => void`
inputRef	Ref to the internal input element	`Ref<HTMLInputElement \| undefined>`

Type Exports

Name	Description
`YhTimeSelectProps`	Props type for `YhTimeSelect`
`YhTimeSelectEmits`	Emits type for `YhTimeSelect`
`YhTimeSelectSlots`	Slots type for `YhTimeSelect`
`YhTimeSelectExpose`	Public expose type for `YhTimeSelect`
`YhTimeSelectSize`	Size union type
`YhTimeSelectOption`	Time option item type
`YhTimeSelectInstance`	Component instance type

Theme Variables

YhTimeSelect supports themeOverrides. Its stylesheet directly consumes the following component-scoped CSS variables, while border, background, and text color tokens continue to come from the shared theme system.

Variable	Description	Default
`--yh-time-select-height`	Control height	`var(--yh-component-size-default, 32px)`
`--yh-time-select-font-size`	Input and option font size	`var(--yh-font-size-base, 14px)`
`--yh-time-select-icon-size`	Prefix and suffix icon size	`14px`
`--yh-time-select-prefix-margin`	Left spacing before the prefix icon	`12px`
`--yh-time-select-display-padding`	Left padding for the display label	`38px`

Use Cases

Appointment System

vue

<template>
  <yh-form :model="form">
    <yh-form-item label="Appointment Date">
      <yh-date-picker v-model="form.date" />
    </yh-form-item>
    <yh-form-item label="Appointment Time">
      <yh-time-select
        v-model="form.time"
        start="09:00"
        end="17:00"
        step="00:30"
        :disabled-hours="[['12:00', '13:00']]"
        placeholder="Select appointment time"
      />
    </yh-form-item>
  </yh-form>
</template>

Business Hours Setup

vue

<template>
  <div style="display: flex; gap: 16px; align-items: center;">
    <yh-time-select
      v-model="openTime"
      :max-time="closeTime"
      start="00:00"
      end="23:59"
      step="00:30"
      placeholder="Opening time"
    />
    <span>-</span>
    <yh-time-select
      v-model="closeTime"
      :min-time="openTime"
      start="00:00"
      end="23:59"
      step="00:30"
      placeholder="Closing time"
    />
  </div>
</template>

Scheduling System

vue

<template>
  <yh-time-select
    v-model="shiftTime"
    :options="[
      { value: '08:00', label: 'Morning Shift (08:00-16:00)' },
      { value: '16:00', label: 'Afternoon Shift (16:00-00:00)' },
      { value: '00:00', label: 'Night Shift (00:00-08:00)' }
    ]"
    placeholder="Select shift"
  />
</template>

TimeSelect ​

Basic Usage ​

Disabled State ​

Clearable ​

Time Range Selection ​

Fixed Time Range ​

Disabled Time Slots ​

minTime and maxTime Constraints ​

Different Sizes ​

Time Format ​

Custom Time Options ​

Full Feature Demo ​

Use in Nuxt ​

API ​

Props ​

Events ​

Slots ​

Expose ​

Type Exports ​

Theme Variables ​

Use Cases ​

Appointment System ​

Business Hours Setup ​

Scheduling System ​

TimeSelect

Basic Usage

Disabled State

Clearable

Time Range Selection

Fixed Time Range

Disabled Time Slots

minTime and maxTime Constraints

Different Sizes

Time Format

Custom Time Options

Full Feature Demo

Use in Nuxt

API

Props

Events

Slots

Expose

Type Exports

Theme Variables

Use Cases

Appointment System

Business Hours Setup

Scheduling System