Documentation Index
Fetch the complete documentation index at: https://primer.io/docs/llms.txt
Use this file to discover all available pages before exploring further.
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
<primer-card-form>
<primer-input-card-expiry></primer-input-card-expiry>
</primer-card-form>
Custom Labels
<primer-input-card-expiry
label="Expiration Date"
placeholder="Month/Year"
aria-label="Card expiration date"
></primer-input-card-expiry>
Inline with CVV
<primer-card-form>
<div slot="card-form-content">
<primer-input-card-number></primer-input-card-number>
<div style="display: flex; gap: 8px;">
<primer-input-card-expiry></primer-input-card-expiry>
<primer-input-cvv></primer-input-cvv>
</div>
<button type="submit">Pay</button>
</div>
</primer-card-form>
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
Errors display automatically on submit or invalid input.
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
const cardForm = document.querySelector('primer-card-form');
cardForm.addEventListener('primer:card-error', (event) => {
const { errors } = event.detail;
errors.forEach(err => console.log(err.field, err.message));
});
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
- 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” |
See also
primer-card-form
Parent container
primer-input-cvv
CVV input
primer-input-card-number
Card number input
