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

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?