Forms
Credit Card Field
Credit Card Field is a compound field for entering card number, expiry, and CVC together as one visually unified control.
State — 4 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Purpose
Credit Card Field is a compound field for entering card number, expiry, and CVC together as one visually unified control.
When to use
Payment forms collecting card details directly (most production flows should use a hosted/tokenized field from a payment provider rather than handling raw card data).
When not to use
When using a payment provider's hosted card element (Stripe Elements, etc.).
Accessibility
Each segment needs its own accessible label, since they're visually merged but functionally distinct inputs.
Common mistakes
Treating this as one text input in code — it must be three independently validated fields.
Properties
State as variants. Card Number, Expiry, CVC (text properties).
Tokens used
component/radius/controlsemantic/border/default