## Billing Toggle (S—065)

A monthly/yearly switch whose thumb slides and rolls the price digits, with the saving called out.

- URL: https://sundaeui.dev/components/billing-toggle
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/billing-toggle.json`
- Tags: saas, pricing, counter, toggle, segmented, billing

A two-option segmented control with a springy thumb. Switching period rolls each digit of the price like an odometer, only as far as it needs to go.
The saving is worked out from the two prices and shown on the Yearly option, and the note under the price says how it is billed.

### Usage

```tsx
import { BillingToggle } from '@/components/sundae/billing-toggle'

<BillingToggle plan="Pro" monthly={24} yearly={18} onPeriodChange={setPeriod} />
```

### Props

- `monthly` (`number`, required): Per-month price on monthly billing.
- `yearly` (`number`, required): Per-month price on yearly billing.
- `plan` (`string`, default `'Pro'`): Plan name above the price.
- `currency` (`string`, default `'$'`): Symbol before the price.
- `period / defaultPeriod` (`'monthly' | 'yearly'`, default `'yearly'`): Controlled or starting period.
- `onPeriodChange` (`(p: Period) => void`): Called when the period changes.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Pricing cards and checkout steps with a monthly and a yearly price.
- Any two-state choice where the number under it should visibly change.

### When not to use

- More than two periods: use a segmented control with three options.
- Plans whose prices are not per month: the /mo suffix will mislead.

### Accessibility

- The switch is a radiogroup; arrow keys move between Monthly and Yearly with roving focus.
- The rolling digits are hidden from assistive tech; a visually hidden sentence ("$18 per month, billed yearly") is announced politely instead.
- Reduced motion removes the thumb spring and digit roll.

### Keyboard

- Tab: Focus the selected period
- ← / →: Switch period

### FAQ

**How is the saving worked out?**
From the two prices: 1 − yearly / monthly, rounded. If yearly is not cheaper the badge is hidden.

**Can I show prices with cents?**
Digits roll and any other character (like a decimal point) stays put, so 18.50 works.