paddle
componentbilling-interval-togglesource: ok · hit
Billing interval toggle
Segmented control for switching between billing intervals. Renders labels automatically from interval keys (month -> Monthly, year -> Annually). Designed for pricing pages and plan selectors.
npx shadcn add "https://developer.paddle.com/r/billing-interval-toggle.json"free
Where it goes
pricing
Interaction
dropdown
Use cases
saas-landing
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
@paddle/paddle-helperstabs
Files1 · source cached 10/9/2026, 7:54:09 PM
registry/new-york/blocks/billing-interval-toggle/components/billing-interval-toggle.tsx
"use client"
import * as React from "react"
import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs"
import { cn } from "@/lib/utils"
import { formatIntervalLabel } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format"
export type BillingIntervalToggleProps = {
intervals: string[]
value: string
onValueChange: (value: string) => void
className?: string
}
export function BillingIntervalToggle({
intervals,
value,
onValueChange,
className,
}: BillingIntervalToggleProps) {
return (
<Tabs value={value} onValueChange={onValueChange} className={cn("w-full", className)}>
<TabsList className="mx-auto flex w-fit">
{intervals.map((interval) => (
<TabsTrigger key={interval} value={interval}>
{formatIntervalLabel(interval)}
</TabsTrigger>
))}
</TabsList>
</Tabs>
)
}