shadcn.io is not affiliated with official shadcn/ui
Order Notes Checkout Block for Vue
Delivery instructions for a corner-shop delivery: a note capped at 200 characters with a live counter, four quick phrases that add themselves, a delivery window, a leave-at-the-door tick, a contact choice and a read-back of what the courier will see.
Installation
Overview
Let people tell the courier what they need to know, with these delivery instructions for Vue with Ark UI. A compact header from Pellmell Pantry, a corner-shop delivery service, sits over a hairline frame with a plus mark on each corner. The first band is a Textarea for the note with a hard limit of 200 characters and a live counter ("42 / 200 characters"), and under it four quick phrases as outline Buttons: pressing one adds it to the note, and a phrase already in the note shows a tick and says so instead of adding it twice. The second band has a delivery window in a Native Select, a Checkbox for leaving the bags at the door if no one answers, and a set of three radio rows for how the courier may contact you. A card, What the courier will see, reads the note back from the same state. The foot has a polite status line that counts the changes not saved yet and two buttons: Save note, the only Shine Button, and Discard, which are always there and answer when there is nothing to do. For grocery, parcel and meal deliveries.
FAQ
How is the 200-character limit enforced?
Twice. The textarea has maxLength, so the browser stops typing at 200, and the change handler slices the value to LIMIT as well, so a paste cannot go over. The counter is read by a screen reader as "42 / 200 characters" and turns heavier in the last 20. A quick phrase that would not fit is not added, and the status line says there is no room instead of cutting it short.
What do the quick phrases do?
Each is a short instruction in PHRASES ending in a full stop. Pressing one adds it after your text with a space and says how many characters are to go. If the phrase is already in the note the button shows a tick, stays focusable and answers "Already in your note" rather than adding a duplicate. On a phone the four chips scroll sideways in one row.
How is What the courier will see built?
From the same state as the controls, so it cannot drift: the note (or "No note for the courier."), the window as "Between 9 and 12" or "Any time of day", the door choice and the contact choice in full sentences. The note row keeps room for a full-length note, so typing never moves the buttons below.
How do Save and Discard behave?
Both are always on the page. When nothing differs from what was last saved they are marked unavailable and pressing either says "No changes to save." or "No changes to discard." in the status line. Otherwise the line counts what changed ("3 changes not saved yet.") and Save keeps the draft as the new baseline while Discard puts the saved values back.