Preview
Selected: month
Playground
Props
intervals
Install
pnpm dlx shadcn@latest add @paddle/billing-interval-toggleyarn dlx shadcn@latest add @paddle/billing-interval-togglenpx shadcn@latest add @paddle/billing-interval-toggleUse an AI agent
Import this component from https://developer.paddle.com/r/billing-interval-toggle.json and open the code for editing. IMPORTANT: preserve the component exactly as-is. Do NOT change colors, CSS variables, Tailwind classes, spacing, fonts, or any visual styles. Do NOT regenerate or restyle the UI. Create files from the registry JSON verbatim and show the code tree.Props
intervalsstring[]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).valuestringrequired
Currently selected interval. Treat the toggle as controlled.
onValueChange(value: string) => voidrequired
Called with the new interval when the customer switches.
classNamestring
Extra Tailwind classes applied to the root element.
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 component.
- You want a simple plan term interval switcher to drive your own pricing UI.