<primer-input-card-expiry>
Secure, PCI-compliant input for card expiration dates. Automatically formats as MM/YY and validates date.Quick Reference
| Parent | <primer-card-form> |
| Properties | label, placeholder, aria-label |
| Features | Auto-formatting, date validation |
Examples
Default
Custom Labels
Inline with CVV
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
label | label | string | "Expiry Date" | Label text |
placeholder | placeholder | string | "MM/YY" | Placeholder text |
ariaLabel | aria-label | string | Value of label | Screen reader label |
Validation
Validates:- Format is MM/YY
- Month is 01-12
- Date is not in the past
Events
<primer-input-card-expiry> does not emit its own events. Validation and submission are managed by the parent <primer-card-form>.
Relevant Parent Events
| Event | Emitted by | How it affects this input |
|---|---|---|
primer:card-submit | <primer-card-form-submit> or external dispatch | Triggers validation — if this input is invalid, an error message displays below it |
primer:card-error | <primer-card-form> | Emitted when any card input fails validation — payload includes all validation errors |
primer:card-success | <primer-card-form> | Emitted when the form submits successfully |
Reacting to card validation errors
CSS Properties
This component uses the shared Input Styling Tokens.Typography
| Property | Description | Default |
|---|---|---|
--primer-typography-body-large-size | Input text size | 16px |
--primer-typography-body-large-weight | Input text weight | 400 |
--primer-typography-body-small-size | Label text size | 12px |
Colors
| Property | Description |
|---|---|
--primer-color-text-primary | Input text color |
--primer-color-text-placeholder | Placeholder text color |
--primer-color-text-disabled | Disabled text color |
--primer-color-text-negative | Error message color |
Border & Background
| Property | Description |
|---|---|
--primer-radius-small | Input border radius |
--primer-color-border-outlined-default | Default border |
--primer-color-border-outlined-focus | Focus border |
--primer-color-border-outlined-error | Error border |
--primer-color-background-outlined-default | Default background |
Spacing
| Property | Description | Default |
|---|---|---|
--primer-space-xsmall | Gap between label and input | 4px |
--primer-space-medium | Input padding | 12px |
Animation
| Property | Description | Default |
|---|---|---|
--primer-animation-duration | Transition duration | 200ms |
--primer-animation-easing | Transition easing | cubic-bezier(0.44, 0, 0.4, 1) |
States
| State | Description | Visual Change |
|---|---|---|
| Default | Initial state | Standard border and background |
| Hover | Mouse over input | Border darkens slightly |
| Focus | Input is focused | Blue border, increased width |
| Filled | Valid date entered | Standard appearance |
| Error | Invalid or expired date | Red border, error message below |
| Disabled | Form or input disabled | Muted colors, no interaction |
Usage Guidelines
Do
- Place inside
<primer-card-form> - Pair with
<primer-input-cvv>in a flex row
Don’t
- Don’t place outside card form context
Content Guidelines
Label
| Do | Don’t |
|---|---|
| ”Expiry date" | "Expiration” (overly formal) |
| “Exp. date” (space-constrained layouts) | “MM/YY” as a label (that’s a format, not a label) |
Placeholder
| Do | Don’t |
|---|---|
MM/YY (shows expected format) | “Enter expiry” (redundant with label) |
| Empty placeholder (clean look) | 00/00 (could be mistaken for a value) |
Error messages
| Do | Don’t |
|---|---|
| ”Enter a valid expiry date" | "Invalid" |
| "This card has expired" | "Date is in the past” |
Related
- primer-card-form — Parent container
- primer-input-cvv — CVV input
- primer-input-card-number — Card number input