Open experiment
Credit balance selector
Selects a prepaid credit package while showing bonus allocation and projected runway. Package radio buttons update bonus, total credits, runway, and selected value. Models prepaid consumable balance and bonus economics rather than subscription tiers.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-credit-balance-selector cmp-atlas" data-state="idle" data-variant="3">
<header><span>Credit controls</span><b>Credit energy cells</b></header>
<div class="cmp-atlas__price-orbit">
<i aria-hidden="true"></i
><strong><small>Projected monthly</small><b data-output>$240</b></strong>
</div>
<label class="cmp-atlas__range"
><span>Plan intensity</span
><input type="range" data-range min="10" max="100" value="70" /><output>70</output></label
>
<div class="cmp-atlas__choices">
<button type="button" data-choice="0" aria-pressed="true">Essential</button
><button type="button" data-choice="1" aria-pressed="false">Scale</button
><button type="button" data-choice="2" aria-pressed="false">Infinite</button>
</div>
<button
type="button"
class="cmp-atlas__primary"
data-primary
data-active-label="Estimate saved"
aria-pressed="false"
>
Save estimate
</button>
<p data-status aria-live="polite">Transparent estimate ready</p>
</section>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Every interactive target is a labelled native control with a visible focus treatment.
- State changes are communicated through a polite text status and never by color alone.
- The contained visual effects stop when the user requests reduced motion.
License: MIT License for open-source use, modification, and distribution.