shadcn.io is not affiliated with official shadcn/ui
Custom Amount Billing Block for Radix UI
Add any amount to a prepaid balance, checked against five limits (whole dollars, minimum, per payment, daily total, balance cap) on a ruler that shows the largest amount allowed now.
Installation
Overview
Let a customer add an exact amount to a balance and see which limit stops them, with this custom amount panel for React with Radix UI. It is the top-up page of Tabbyfield, a prepaid balance for small agencies' print and ad spend. A hairline frame with a plus mark on each corner opens on the largest amount allowed now, "$500, the per-payment limit", and a ruler from $0 to $5,000 that shades what can be added and ticks the three ceilings: the per-payment limit, what is left of today's total and the room under the balance cap. A list of the five rules says in words which ones the amount is within, a field takes the amount with a check beside it, and a Toggle Group of quick amounts only fills the field. A value over a limit gets a message that names the limit. The Shine Button names the amount, stays quiet while a limit fails and is the only colored control. It's built from Field, Input, Toggle Group, Shine Button and Guides, with a CSS entrance only. For prepaid balances, wallets and usage credits.
FAQ
How do I change the limits?
Edit the constants at the top of the file: MIN, PER_PAYMENT, DAILY and CAP, and START for the balance and what was added today. rulesOf turns them into the five rules, and ceilingOf takes the smallest of the three ceilings and names the one that sets it. The ruler's ticks and the shaded stretch come from the same numbers.
Is the ruler the only way to read the limits?
No. The ruler is a drawing and is hidden from assistive technology; the list under it says the same facts as text, with a hidden word for each rule, "Within" or "Over", beside its glyph. The largest amount allowed now is also text above the ruler.
What stays local, and how do I wire it up?
Add changes the balance and the day's total in the tab and says "Added $250.00 in this demo, nothing was charged", then re-derives every limit, so adding $250 twice shows the daily total and the cap closing in. In your app the button creates a payment with your provider; keep the limits on your server and answer with the same messages when one is exceeded.
Why whole dollars only?
It is one of the account's rules and a common one for prepaid balances. A value such as 12.5 fails the first rule and the field says "Use whole dollars only". Change WHOLE and the amount helper if your balance takes cents.
Is it accessible?
The field has a visible label, its hint and its problem share one slot that is read with it, the quick amounts are a labelled group, and the status line is a polite live region that gives the reason when Add is pressed early. Amounts are set left to right inside right-to-left pages, and the ruler keeps its direction.