TimePicker

Preview

Installation

pnpm add fancy-ui-svelte

import { TimePicker } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { TimePicker } from 'fancy-ui-svelte';
</script>

<TimePicker />

Examples

Basic Usage

Custom Step

15-minute slots instead of the default 30.

svelte

<script lang="ts">
	import { TimePicker } from "$lib/fancy-ui/time-picker";

	let time = $state<string | null>(null);
</script>

<TimePicker bind:value={time} step={15} label="Appointment slot" placeholder="15-minute slots" />

With Bounds

Restricted to business hours, 09:00 to 17:00.

svelte

<script lang="ts">
	import { TimePicker } from "$lib/fancy-ui/time-picker";

	let time = $state<string | null>(null);
</script>

<TimePicker
	bind:value={time}
	min="09:00"
	max="17:00"
	label="Meeting time"
	placeholder="Business hours only"
/>

Props

Prop	Type	Default	Description
`value`	string \| null	`null`	The selected time, "HH:mm" 24-hour; bindable. hour12 changes display only.
`onValueChange`	(value: string \| null) => void	-	Called with the new value whenever a slot is picked.
`step`	number	`30`	Minutes between generated slots.
`min`	string	-	Earliest selectable slot ("HH:mm", inclusive).
`max`	string	-	Latest selectable slot ("HH:mm", inclusive).
`hour12`	boolean	`false`	Display only — 12-hour clock with AM/PM. The value stays HH:mm either way.
`disabled`	boolean	`false`	Blocks opening the panel; excludes the control from form submission.
`required`	boolean	`false`	Marks the field required for the surrounding form.
`invalid`	boolean	`false`	Drives the error border and aria-invalid.
`id`	string	-	Element id.
`name`	string	-	Native name. When set, a hidden input carries the HH:mm value.
`label`	string	-	Accessible name — for a control with no visible Label next to it.
`placeholder`	string	`"Select a time"`	Shown in the trigger while no time is selected.
`locale`	string	-	BCP 47 locale for slot and trigger-label formatting.
`class`	string	-	Additional CSS classes, merged onto the trigger button.
`ref`	HTMLButtonElement \| null	`null`	Bindable reference to the trigger button.