
Credit Card Input Form
Design a mobile payment form for entering a credit card number, expiry date, and CVV. It should feel native to a phone checkout flow, with the numeric keypad active and the form built for fast thumb entry.
The screen needs to make it obvious which field is active, how many digits are expected, and where the user is in the payment step. Card number formatting should guide entry without getting in the way.
Treat the three fields as one short sequence, not three separate tasks. The layout should help the user move from card number to expiry to CVV with minimal friction and no guessing.
This is about trust as much as speed. The form should look calm, clear, and payment-ready, with enough structure to reduce mistakes while the user is typing.
Show input masks and inline examples only where they help the next digit feel obvious; don’t crowd the form with extra labels.
Better at UI design with every challenge
Select complexity and generate challenge.
Pick a platform.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.