shadcn.io is not affiliated with official shadcn/ui
Statement Descriptor Billing Block for Ark UI
A statement descriptor with a fixed BAKESHELF* prefix and an editable ending, checked as you type and shown live on a card statement, a banking app and a text alert.
Installation
Overview
Let a business choose how it shows up on its customers' statements, with this statement descriptor section for React with Ark UI. A hairline frame with a plus mark on each corner holds two cells ruled apart by Guides. The first has a Field with the fixed prefix BAKESHELF* drawn beside an Input for the ending, a counter that reads like 24 of 22, and a message reserved under it. The rules are 22 characters in all, letters, numbers and spaces only, at least one letter, and a refusal that names each of < > backslash, apostrophe, quote mark and asterisk. The second cell shows How it will read in three drawn statements that redraw as you type: a card statement in monospace, upper case and cut at 22 characters, a banking app that keeps the first 12 and adds an ellipsis, and a text alert with the whole descriptor in its sentence. The foot says whether anything is unsaved; Save descriptor, the only Shine Button, keeps a valid ending for the page, and Reset puts the saved one back. For payment settings and any business that charges cards.
FAQ
Where do the rules come from?
From constants and small helpers at the top of the file: PREFIX, MAX_TOTAL, REFUSED and problemOf. They are the demo's own, written to be typical of card descriptors, not a statement of what every card network or bank accepts. Check them against your payment provider's documentation and change the numbers there.
Do the previews update while I type?
Yes, from the same state as the field. The card statement is cut at 22 characters even when the field is over, so you can see what a bank would print, and the banking app keeps 12 characters and an ellipsis. An invalid ending still draws, with the message under the field saying what to fix.
What does Save descriptor do?
With a valid, changed ending it keeps it for this page and says Saved in this demo, nothing was sent. With a problem it refuses, says to fix the descriptor first and moves focus to the field. With nothing changed it says so. The button stays on screen and is marked aria-disabled in those cases rather than hidden.
What stays local, and how do I wire it up?
All of it. Nothing is sent to a card network or processor, and the descriptor resets with a reload. In your app post the ending when the form is saved, let your processor validate it again on the server, and expect that banks may show it differently from the previews.
Is it accessible?
The field has a visible label and a hint and message tied to it with aria-describedby; the prefix is drawn beside it and is not part of what you type. The message uses words and an icon, with the text in the normal colour. The previews are real text in a list of terms and descriptions.