Design System
Card Input
Payment-card number field with a floating label and a card-brand logo slot. eShop platform — shares the field with Text Input. Supports error and info messages, disabled, and an on-dark surface variant.
Playground
States
Empty (label as placeholder), filled (brand-logo slot + number), error, info, and disabled.
On dark surface
Pass onDark on a bold or dark surface — it uses the on-dark token variants.
When to Use
Best for
- Collecting a payment-card number at checkout
- Cases where showing the detected card brand reassures the user
Consider alternatives when
- Collecting non-card numbers — use Text Input
- Collecting a phone number — use Phone Input
Props
| Prop | Type | Required | Description |
|---|---|---|---|
label | string | No | Field label (default: "Credit Card") |
value | string | No | Card number (controlled). Pair with onChange |
defaultValue | string | No | Initial value (uncontrolled) |
onChange | (value: string) => void | No | Change handler |
brandLogo | ReactNode | No | Card-brand logo for the 22×18 slot (clip placeholder until assets land) |
error | string | boolean | No | Error message (string) or error border only (true) |
info | string | No | Helper message (hidden while an error is shown) |
isDisabled | boolean | No | Disable the field |
onDark | boolean | No | Use on-dark token variants |
Import
import { CardInput } from '@/components/CardInput/eshop';
Wrap in <div data-platform="eshop"> so the eShop typography classes apply. The card-brand logo slot renders a neutral clip placeholder until brand assets are added.
Design Tokens
| Purpose | Token |
|---|---|
| Field fill | var(--color-fill-element-field) |
| Border (default / focused / error) | var(--color-border-element-field[-focused|-error]) |
| Value text | var(--color-content-primary) |
| Brand-logo slot | var(--color-fill-element-neutral-soft) |
| Error message | var(--color-content-critical) |
| Focus ring | var(--color-border-element-focus-ring) |
| Typography (value / label) | .body-lg / .body-sm |