KQ-707 · AUTOPAY/TOGGLE

Autopay Toggle

A switch that puts a bill on autopay. The knob rides its track on snap and a calendar glyph beside it turns over on the same spring, from a dash to the pay date's day; below, the upcoming schedule is an ordered list into which the autopay payment slides on snap at its dated place while the rows around it glide apart and the list grows to its measured height. Space and Enter toggle the switch.

KQ-707 · AUTOPAY/TOGGLE

Fernworks cardPay by hand

Upcoming

3 OctWaylight Pay top-up$50.00
22 OctBasinworks Freight invoice$340.00

Autopay off · pay by hand

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/autopay-toggle

Props

checked / defaultChecked: boolean; default false; Controlled or initial switch state.
onCheckedChange: (checked: boolean) => void; default —; Fires from the press that flipped it.
label: string; default —; What is being paid; names the switch.
amount: number; default —; The payment autopay will make.
nextDate: { month: number; day: number }; default —; The next pay date, month 1 to 12; passed explicitly so the render never reads the clock.
schedule: ScheduleItem[]; default []; Other upcoming payments: { id, label, month, day, amount }, in any order.
format: (value: number) => string; default USD via Intl.NumberFormat; Turns an amount into its printed string.

Prop	Type	Default	Description
checked / defaultChecked	boolean	false	Controlled or initial switch state.
onCheckedChange	(checked: boolean) => void	—	Fires from the press that flipped it.
label	string	—	What is being paid; names the switch.
amount	number	—	The payment autopay will make.
nextDate	{ month: number; day: number }	—	The next pay date, month 1 to 12; passed explicitly so the render never reads the clock.
schedule	ScheduleItem[]	[]	Other upcoming payments: { id, label, month, day, amount }, in any order.
format	(value: number) => string	USD via Intl.NumberFormat	Turns an amount into its printed string.