Gallery

Design a time picker for scheduling flows. The component should let a user choose a specific time quickly, with clear controls for hour, minute, and format. Use either a clock face, stepper, dropdown, or hybrid pattern, but keep the interaction obvious and the selected value easy to read.

Show both 12-hour and 24-hour formats, and make the switch between them explicit. If the picker supports seconds, make that addition feel intentional rather than cramped. The selected time should stay visible while the user edits individual fields.

Include the states a real product needs: default, focused, open, selected, disabled, and invalid. If some times cannot be chosen, show how they are blocked and what the user can do next. Keep the control compact enough to fit inside a form, but clear enough to work on first glance.