shadcn.io is not affiliated with official shadcn/ui
Usage Cap Settings Billing Block for React
A daily cap and a monthly cap as number fields, a stepped figure of the most you could spend by each day with the day the monthly cap binds, a choice of what happens at the cap and a save that refuses a daily cap above the monthly one.
Installation
Overview
Let customers see how two caps work together before they set them, with these usage cap settings for React with Base UI. Inside a hairline frame with a plus mark on each corner, two Number Inputs set a daily cap ($40) and a monthly cap ($800), and a choice of two native radio rows says what happens at the cap: pause new campaigns, or keep running and email. Beside them, behind a divider, a hand-built figure draws the most that could be spent by each day of a 31-day month: a stepped line for the daily cap times the days, held flat by the monthly cap, a dashed line for the monthly cap and a dot on the day it starts to bind, so the sentence under it reads "The monthly cap binds on day 20." The highest possible bill and the day it is reached sit beneath, and change as you type. A daily cap above the monthly one gets a message ("A daily cap above the monthly cap never applies") and Save refuses it and moves focus to the field. The action foot counts unsaved changes beside the only Shine Button and an outline Button to discard them. On a phone the fields come first and the figure sits under them. For ad platforms, API products and any budget with two limits.
FAQ
What does the figure show?
Day by day, the most the account could have spent: the daily cap times the days so far, never above the monthly cap. The dotted diagonal is the daily cap alone, the dashed line is the monthly cap, the solid stepped line is what actually bounds the bill, and the dot is the first day the monthly cap holds it. If the daily cap never reaches the monthly one in 31 days the sentence says the daily cap holds all month. It is drawn, hidden from screen readers, with the same facts in the sentence and the two figures under it.
What happens when the daily cap is above the monthly cap?
A message appears in a slot that is always reserved, so nothing moves, naming the problem and the way out. The field is marked invalid and described by that message. Save refuses the change, says so in the foot, and moves focus to the daily cap; typing again clears the refusal. The figure still draws the monthly cap binding on day 1, so you can see why.
What is the difference between the two choices at the cap?
Pause new campaigns stops new spending at the cap, so the highest possible bill is the figure shown. Keep running and email me lets spending go on, so the panel says "No ceiling" and the sentence says you are emailed on that day instead. The choice is two native radios, so the arrow keys move between them and the group is named "At the cap".
How are the fields read?
Each is a Number Input with a minimum of $1 and a maximum of $100,000. What you type is read as whole dollars, and on blur it settles inside that range (an empty field goes to $1). Digits typed in an Arabic locale are converted to plain digits before they are read.
What stays local, and how do I wire it for real?
Save keeps the caps in this page and says "Saved in this demo. Nothing was applied." Send the two amounts and the choice to the service that enforces your budgets, load the saved values into SAVED, and take the month's length and reset days from your billing calendar instead of the typed 31 and the 1st.