Batch stepperPro
Images per run, 1 to 8, with run slots and a total credit cost whose digits roll, amber with a top up link when the run costs more than the balance.
On this page
ProImages per run with the total cost rolling as the count changes.
Installation
Usage
import { BatchStepper } from "@/components/ui/chatcn/pro/batch-stepper"
<BatchStepper value={count} onValueChange={setCount} creditsPerImage={3} balance={credits} />Slots the balance cannot pay for are outlined in amber, so the limit is visible before the total turns. RollingDigits is exported for your own counters.
Examples
States
ProOver the balance, at the maximum, compact and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | number | Default 1 |
min, max | number | Default 1 and 8 |
creditsPerImage | number | Default 1 |
balance, onTopUp | Amber with a top up link when short | |
variant | "default" | "compact" | Compact is the stepper alone |
label, units, locale, disabled |
Keyboard
| Key | Action |
|---|---|
↑ → + | One more image |
↓ ← - | One fewer |
1 to 8 | Jump to that count |
Home, End | Minimum or maximum |
Page Up, Page Down | Four more or fewer |
Accessibility
- A spinbutton whose value text includes the cost: "4 images, 12 credits". The minus and plus buttons stay out of the tab order.
- Going over the balance is announced with how many credits are left.
Motion
- After a click each changed digit rolls on its own column in 280 ms. Keyboard changes and the first render swap at once; reduced motion always swaps.