Use code "LAUNCH20" for 20% off on HextaUI Pro - Learn more
HextaUIHextaUI
/Blocks

Time Selection

Interactive time selection component with quick duration presets, start/end time picking, and visual duration display.

Required components

Run following command in your terminal to install the required components for this blocks

npx hextaui@latest add button card select toggle label badge

Time Selection Block

A comprehensive time selection interface with start time, end time, quick duration presets, and apply/cancel actions.

Schedule Time

Duration
8h
From 9:00 AM to 5:00 PM

time-selection.tsx
Loading...

TimeSelectionBlock.tsx
Loading...

Basic Time Selection

A simple time selection interface with start and end time picking.

Select Time Range

Duration
8h
From 9:00 AM to 5:00 PM

Current Selection

Start: 09:00End: 17:00Duration: 8h 0m

Precise Time Selection

A compact time selection interface with precise start and end time picking.

Precise Time Selection

Edit on GitHub

Last updated on

Team Invite1

A modern team invitation and member management component with permission controls