shadcn.io is not affiliated with official shadcn/ui
Loose Time Input Form Block for React
A pickup time field that accepts what people type, such as 9, 930, 9:30 pm or 21.30, reads it back in a 12 or 24 hour format and names the part of the rule a time breaks.
Installation
Overview
Let people type a time the way they say it with this time input form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner: a pair of cells on one hairline (the Input, and a "Read as" cell with a large reading and a Toggle Group for a 12 hour or 24 hour format), a band of three free slots as outline Buttons, and an action foot. The field takes "9", "930", "9:30 pm", "21.30", "9a" and "noon"; leaving it rewrites the text in the chosen format and reads it back ("21:30"). The rule is "pickups run 08:00 to 18:00 in 15 minute steps", and the line under the field names the part that fails: a time before or after the hours, or between steps ("17:50 is not on a 15 minute step: use 17:45 or 18:00") with the two neighbours as buttons that fill the field. It's built from Input, Field, Toggle Group, Shine Button and Guides, with a CSS entrance only. For pickup and delivery windows, appointments and any field where the text is a time.
FAQ
How do I change the hours, the step and the free slots?
Edit the constants at the top: OPEN and LAST (minutes after midnight), STEP (the minutes between slots) and FREE (the slots still open). issueOf is the rule and returns a message with up to two times to offer; the reading, the buttons and the status all follow from it, in whichever format is chosen.
Which ways of typing a time are read, and what does a bare 5 mean?
Hours alone ("9"), hours and minutes with or without a colon or a dot ("930", "9:30", "21.30"), an am or pm suffix in any common spelling ("9:30pm", "9a", "9 a.m.") and the word "noon". A number from 1 to 7 with no suffix is read as the afternoon because pickups run in the daytime, and the "Read as" cell says so ("Read 5 as 5 pm"). Anything else gets one line: "Try a time such as 9:30 pm or 21:30."
When does the field check, and why does it not rewrite while I type?
It checks when you leave the field, press Set pickup or choose a slot, and from then on it re-checks as you edit. Rewriting the text while someone types moves the caret and fights the keys, so the text only changes as focus leaves, and the "Read as" cell shows the reading from that moment. Switching between 12 hour and 24 hour rewrites a readable time at once.
Why is the field a text input and not a time input?
A native time input fixes the format to the browser's locale, has no way to say "17:50 is not on a step" in your words and shows a different control in every browser. A text field with inputMode="text" keeps one behaviour on every browser and every version here, accepts the typing above, and still brings up a keyboard with letters for "pm". The format switch is a group of two toggle buttons you can reach with the arrow keys.
What stays local, and how do I connect it for real?
Nothing is booked: Set pickup says "Set for 09:15 on Thu, Oct 15. Nothing was booked." To make it real, send the minutes after midnight (not the text) from the submit handler, check the slot on your server, and show its answer in the same status line. Keep the typed text only for display.
How do I connect it to react-hook-form or TanStack Form?
Store the minutes after midnight as the form's value and keep the typed text in the block, because the text is only rewritten on leaving the field. With react-hook-form, use Controller, call field.onChange with the reading's minutes from the blur handler, and use issueOf in a resolver. With TanStack Form, validate with onBlur and return the message issueOf gives.
Related
- Pro
Leave Date Input Form
Dates and timesA date field you type or pick: month, day and year segments plus a calendar button, an impossible day named as it is typed, a soft year-end freeze notice, the date read back in words and two quick chips.
- Pro
Time Zone Select Form
Dates and timesA grouped select of sixteen time zones with the offset in each label, a real read of the device's own zone after the page loads, and one sentence saying how far the chosen zone is from it.
- Pro
Date Range Form
Dates and timesTwo date inputs and a month that stay one range: booked nights drawn struck through and named when a block runs over one, an end before the start refused on the end field, and a two-night minimum.
- Pro
Request a Callback Contact
Calls and meetingsA callback request with a status band and a form that asks when to ring: as soon as possible, later today from a select of 15-minute times, or on a chosen day, with a time zone.
- Pro
Phone Input with Country Code Form
Numbers and pickersA national-number field joined to a country menu that formats the digits for the chosen country as you type, checks the count per country and shows how the number would be stored.
- Pro
Address Form with ZIP Help
Checkout and addressA six-column address grid that never changes size: street, an apartment line behind a quiet button, city, a state select and a ZIP code that fills the city and state from a typed table of six.