shadcn.io is not affiliated with official shadcn/ui
Gift Options Checkout Block for React
A gift message with a 150-character counter, closing-line chips, a sender name and three switches, with a packing slip beside it that follows every control: the message, the sender line and the price column.
Installation
Overview
Let the buyer write the note and see the slip, with these gift options for React with Base UI. A compact header from Dovecote Linens, a bed linen shop, sits over a hairline frame with a plus mark on each corner. The first cell holds the controls: a gift message (Textarea in a Field) with a live count out of 150, three outline closing-line chips that add a line when there is room, a name for the sender line and three Switches: send anonymously, hide prices and email them when it ships, which turns on a recipient email. Beside it the packing slip is real text that follows every control: the message as typed, "From Mira" until anonymous is on, the item lines and a price column until prices are hidden. Hidden parts keep their space, so the slip never changes size. Continue to shipping is the only Shine Button and names a bad recipient email, focusing it. For gifts, presents and any shop that ships to someone other than the buyer.
FAQ
Is the packing slip really what gets printed?
It's the slip drawn as text from the same state as the controls, so what you see is what your own printing step should receive: the message, the sender line, the item lines and, only when prices are shown, the price column and total. The block doesn't print or send anything. Use the same three values (message, sender name, show prices) on the server when you render the real slip.
Why do hidden parts keep their space?
So the slip and the form never move while someone works. A hidden sender line and a hidden price column are invisible and aria-hidden, which keeps the layout and removes them from assistive technology, while the message area has a fixed minimum height for seven lines.
How does the message limit work?
The Textarea accepts 150 characters and the counter reads "112 of 150" with the characters to go spoken. A closing-line chip adds its line on a new line only if it fits; otherwise the status line says there is no room and the message is unchanged. Line breaks are kept on the slip.
What does Email them when it ships do?
It enables the recipient email field, which is reserved even when off so the form doesn't move. A press on Continue with the switch on and a bad address names the problem, marks the field and moves focus to it. The address isn't sent anywhere; wire it to your shipping notification step and keep a note on the order.
What stays local, and how do I connect it for real?
All of it: the fields live in the tab's state and Continue only says that shipping comes next. To connect it, save the message, sender name and the three flags on the order in your backend, escape the message when you render it (it's plain text here), and send the recipient email only after the buyer's consent.