Skip to main content

<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>
Propertieslabel, placeholder, aria-label
FeaturesAuto-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

PropertyAttributeTypeDefaultDescription
labellabelstring"Expiry Date"Label text
placeholderplaceholderstring"MM/YY"Placeholder text
ariaLabelaria-labelstringValue of labelScreen 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

EventEmitted byHow it affects this input
primer:card-submit<primer-card-form-submit> or external dispatchTriggers 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

PropertyDescriptionDefault
--primer-typography-body-large-sizeInput text size16px
--primer-typography-body-large-weightInput text weight400
--primer-typography-body-small-sizeLabel text size12px

Colors

PropertyDescription
--primer-color-text-primaryInput text color
--primer-color-text-placeholderPlaceholder text color
--primer-color-text-disabledDisabled text color
--primer-color-text-negativeError message color

Border & Background

PropertyDescription
--primer-radius-smallInput border radius
--primer-color-border-outlined-defaultDefault border
--primer-color-border-outlined-focusFocus border
--primer-color-border-outlined-errorError border
--primer-color-background-outlined-defaultDefault background

Spacing

PropertyDescriptionDefault
--primer-space-xsmallGap between label and input4px
--primer-space-mediumInput padding12px

Animation

PropertyDescriptionDefault
--primer-animation-durationTransition duration200ms
--primer-animation-easingTransition easingcubic-bezier(0.44, 0, 0.4, 1)

States

StateDescriptionVisual Change
DefaultInitial stateStandard border and background
HoverMouse over inputBorder darkens slightly
FocusInput is focusedBlue border, increased width
FilledValid date enteredStandard appearance
ErrorInvalid or expired dateRed border, error message below
DisabledForm or input disabledMuted 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

DoDon’t
”Expiry date""Expiration” (overly formal)
“Exp. date” (space-constrained layouts)“MM/YY” as a label (that’s a format, not a label)

Placeholder

DoDon’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

DoDon’t
”Enter a valid expiry date""Invalid"
"This card has expired""Date is in the past”