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


Examples

Default

Custom Labels

Inline with CVV


Properties


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

Reacting to card validation errors


CSS Properties

This component uses the shared Input Styling Tokens.

Typography

Colors

Border & Background

Spacing

Animation


States


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

Placeholder

Error messages


See also

primer-card-form

Parent container

primer-input-cvv

CVV input

primer-input-card-number

Card number input