> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Billing interval toggle

Segmented toggle for switching between billing intervals, like monthly and yearly.

---

## What it does

A small, focused component for switching between billing term intervals. Labels are automatically formatted from the interval string. For example, `"month"` becomes `"Monthly"` and `"year"` becomes `"Yearly"`.

## When to use

- You're building a custom pricing page or interface that doesn't use the [pricing display](https://developer.paddle.com/sdks/components/pricing-display.md) component.
- You want a simple plan term interval switcher to drive your own pricing UI.

**Registry:** [`https://developer.paddle.com/r/billing-interval-toggle.json`](https://developer.paddle.com/r/billing-interval-toggle.json)

## Install

```bash
npx shadcn@latest add @paddle/billing-interval-toggle
```

Also runnable with `pnpm dlx shadcn@latest add @paddle/billing-interval-toggle` or `yarn dlx shadcn@latest add @paddle/billing-interval-toggle`.

## Props

- **intervals** (string[], required): Intervals to render as toggle options. Accepts any subset of "day", "week", "month", "year". Labels are auto-formatted (e.g. "month" renders as Monthly).
- **value** (string, required): Currently selected interval. Treat the toggle as controlled.
- **onValueChange** ((value: string) => void, required): Called with the new interval when the customer switches.
- **className** (string): Extra Tailwind classes applied to the root element.