Time Picker Components

Dev Design Library indexes 49 time picker components from 18 open-source UI libraries, with the most coming from ReUI, Origin UI, Shadcn Space, React Spectrum and TailGrids. Each one links to its page with the source code, a live preview where available, the library license and the install command. Time picker components belong to the Inputs group.

• Time FieldHeroUI · ReactTime input field with labels, descriptions, and validation built on React Aria TimeField
• Time FieldReact Spectrum · ReactTimeFields allow users to enter and edit time values using a keyboard. Each part of the time is displayed in an…
• Comp 191Origin UI · React
• Inline time panelReUI · ReactHour and minute columns rendered in place, with Now, Clear and a live readout.
• AI ScheduleKokonut UI · ReactMeeting times the assistant found, each with a strip of both calendars so you can see why it is free. Booking folds…
• time-fieldIntent UI · Reacttime-field
• Availability SchedulerbeUI · ReactWeekly availability editor where each day springs between available and unavailable, time ranges add and remove with…
• Time FieldTailGrids · ReactA segment-based time input component.
• Duration PickerRare UI · ReactA gooey, spring-animated picker for entering a duration in hours and minutes.
• Datetime PickerSpectrum UI · ReactA date and time picker built on shadcn/ui with no extra dependencies.
• Date Time PickerPanel UI · React NativeA day and a time of day, picked in one panel.
• Date Picker 01 - Data & Time PickerShadcn Space · ReactA professional appointment booking card with date and time range selection.
• Booking Slot CalendarOpenSourceUI · React
• time-fieldBaseLayer · ReactA time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an…
• AvailabilityWatermelon UI · React
• Time pickerArc Library · ReactChoose a time with sensible keyboard behavior.
• Sundial PickerUI Lab · ReactPick a time by dragging the sun across the sky.
• Time PickerReactFrame · ReactA time picker with a popover of scrollable hour, minute and AM/PM columns: 12 or 24-hour clock, minute steps, min/max…
• Tailwind Time FieldReact Spectrum · React
• Comp 200Origin UI · React
• Confirm before applyingReUI · ReactColumn picks stay a draft until OK, so a shift change applies once.
• Time PickerTailGrids · ReactA component to select a time.
• Time PickerPanel UI · React NativeA time of day, as a wheel, a clock or a swipeable scale.
• Date Picker 03 - Time PickerShadcn Space · ReactA professional time picker with time selection.
• Slot PickerWatermelon UI · React
• Clock FieldUI Lab · React
• Vanilla Time FieldReact Spectrum · React
• Comp 218Origin UI · React
• Localized labelsReUI · ReactEnglish, German, Chinese and Arabic labels, clocks and digits, with Arabic right to left.
• Time Picker 01 - Scroll ColumnsShadcn Space · ReactPopover time picker with scrollable hour, minute, and AM or PM columns
• Comp 231Origin UI · React
• Form field with validationReUI · ReactNative form field with a required check, an error, reset and the submitted value.
• Time Picker 02 - Booking SlotsShadcn Space · ReactGrid of bookable time slots where taken slots are disabled and the chosen slot is confirmed below
• Comp 503Origin UI · React
• Date and timeReUI · ReactSchedule a post with a calendar and time columns side by side in one card.
• Time Picker 03 - Ring TrackShadcn Space · ReactCircular ring time picker where an arc fills as you drag the knob, with the time and AM or PM toggle in the center and…
• Comp 505Origin UI · React
• Popover pickerReUI · ReactOutline trigger in a labelled field that opens hour and minute columns with Now, Clear and OK.
• Time Picker 04 - Time RangeShadcn Space · ReactStart and end time selects with a live duration badge and validation when the end is before the start
• Comp 55Origin UI · React
• Typable time inputReUI · ReactType 930, 14:30 or 2:30 pm, or step through free times with the arrow keys.
• Time Picker 06 - Across Time ZonesShadcn Space · ReactMeeting time picker that converts the chosen time across cities with day and night icons and next day badges
• 12-hour clock with secondsReUI · ReactHour, minute, second and AM/PM columns for a stream go-live time.
• Hour onlyReUI · ReactA daily digest send time picked by the hour in a settings row.
• Steps and opening hoursReUI · React15-minute steps limited to 08:30 to 17:30, with out-of-range hours disabled.
• Unavailable slotsReUI · React30-minute appointment slots with the lunch hour and booked times disabled.
• Start and end timeReUI · ReactA meeting range where the end stays after the start and the duration updates.
• Time zone labelReUI · ReactEvent time in the venue's time zone, shown in the trigger, with a footer that leaves out Now.
• Time PickerReUI · ReactA shadcn time picker with hour, minute, second and AM/PM columns in a popover or inline, text entry, steps, time…

Libraries with time picker components

• ReUI
• Origin UI
• Shadcn Space
• React Spectrum
• TailGrids

Related categories

• Tailwind CSS Time Picker Components
• Animated Time Picker Components
• shadcn/ui Time Picker Components
• Input Components
• Text Input Components
• Select Components
• Form Field Components
• Form Components
• Textarea Components
• Switch Components
• Checkbox Components
• Slider Components
• Radio Components
• Combobox Components
• File Upload Components
• Search Input Components
• Date Picker Components
• Login Form Components
• Color Picker Components