Card Field

Accessibility

• Three labelled inputs inside one visual field, with autocomplete cc-number, cc-exp and cc-csc.
• The helper is linked with aria-describedby and announced politely.
• Invalid parts set aria-invalid.

Motion

• Focus moves the ring to ink and the fill to the surface in 150 ms.
• After four digits the icon becomes the brand chip, scaling from 0.8.
• An expired card shakes the field once over 300 ms and the ring turns danger.
• Pay keeps its width through Processing, then fills with success in 320 ms and the tick draws.
• With reduced motion, there is no shake and the tick appears.

Responsive behavior

• 384 px on Web and 358 px on Mobile.
• Inputs use 16 px text on Mobile, so iOS does not zoom.
• Pay grows from 44 to 52 px.

Performance

• Expiry and security code mount only once the number is complete.
• Formatting and the Luhn check run on each change, and the shake runs only when a card is expired.
• The date is read after mount, so the server and client render the same markup.

• Import CardField from @/components/fetaui/card-field. amount is required.
• Do the charge in onPay. Pay stays disabled until the card is valid, and a rejected promise returns to idle and shows failedMessage. Pass error for a message from your server.
• Never log or store the raw card. Send it to your payment provider's tokenizer. The checks here are for typing, not fraud.
• testCard fills a test number, so keep it to test mode. focusPart is for docs. Composes Button.