Search blocks by description or jump to a page.
Stepped chip selector for event volume tiers from 10k to 2 million per month with a live price summary and proration note.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Usage Tier Selector is the metered-plan picker, four stepped chips (Starter, Growth, Scale, Business) for event volume from 10,000 to 2,000,000 events per month. Clicking a chip updates the summary panel below: tier name, event cap, monthly add-on price (Growth is +$19, Scale is +$49), and the plan gate badge. The honest note reads: tier changes prorate to your current billing cycle, overage billed at $0.003 per additional 1,000 events.
Tiers are one typed array. Stepped chips with aria- pressed give the selector keyboard and screen-reader support without a range input dependency.
Reach for this block on the usage or billing settings page when your pricing is volume-banded rather than flat. Wire the Save tier button to your subscription update endpoint and reflect the live tier on load.
A natural flow around it on an Application Pro page:
Before
After
One strong use is an event-volume tier picker. Other selectors:
Tip: show the overage rate in the summary panel, not just the included quota, so users can estimate cost before they commit.