KQ-587 · FLIP/CARD/FORM

Flip Card Form

A card form whose preview is the feedback. Typing the number, name and expiry writes them onto the face and the brand mark cross-fades as the prefix resolves; focusing the security code turns the card over on snap — a real rotateY with backface-visibility hidden inline on both faces — and blurring turns it home. The inputs are real and carry cc-number, cc-name, cc-exp and cc-csc, the preview is aria-hidden, and under reduced motion the card swaps faces instead of turning.

KQ-587 · FLIP/CARD/FORM

Waylight · paymentStep 2 of 3

Showing the front of the card

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/flip-card-form

Props

value / defaultValue: { number: string; name: string; expiry: string; cvc: string }; default —; Controlled or initial values; number, expiry and cvc are held as digits and grouped for display.
onValueChange: (value: CardFormValue) => void; default —; Fires on every keystroke with the sanitised values.
onSubmit: (value: CardFormValue) => void; default —; Fires on submit with the current values.
onSideChange: (side: "front" | "back") => void; default —; Fires when the preview turns over, so a page can narrate the side.
submitLabel: string; default Save card; Submit button copy.

Prop	Type	Default	Description
value / defaultValue	{ number: string; name: string; expiry: string; cvc: string }	—	Controlled or initial values; number, expiry and cvc are held as digits and grouped for display.
onValueChange	(value: CardFormValue) => void	—	Fires on every keystroke with the sanitised values.
onSubmit	(value: CardFormValue) => void	—	Fires on submit with the current values.
onSideChange	(side: "front" \| "back") => void	—	Fires when the preview turns over, so a page can narrate the side.
submitLabel	string	Save card	Submit button copy.