For AI agents and LLMs: a structured documentation index is available at /llms.txt. Every page has a Markdown sibling — append .md to any URL.

Skip to content
Docs

Billing interval toggle

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

Preview

Selected: month

Playground

Props

intervals

Install

pnpm
pnpm dlx shadcn@latest add @paddle/billing-interval-toggle
yarn
yarn dlx shadcn@latest add @paddle/billing-interval-toggle
npm
npx shadcn@latest add @paddle/billing-interval-toggle

Use an AI agent

Import this component
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

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.

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.

Was this page helpful?