Skip to content
Home

Expiry

Info
Demos
Properties
Events

Import

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Expiry />)

Description

Field.Expiry is a wrapper component for the input of strings, with user experience tailored for expiry dates for payment cards.

It supports the HTML autocomplete attribute, and by default set it to cc-exp-month for the month field, and to cc-exp-year for the year field.

Relevant links

Validators

Internal validators exposed

Field.Expiry exposes the expiryValidator validator through its onBlurValidator property, take a look at this demo. The expiryValidator validator, validates invalid month and/or year.

Extending validators

Combine the exported validator with your own rules to keep the built-in checks and add custom guards. Import ExpiryValidator to type your validator and the shared validators.

import { Field } from '@dnb/eufemia/extensions/forms'
import type { ExpiryValidator } from '@dnb/eufemia/extensions/forms/Field/Expiry'


const myValidator: ExpiryValidator = (value, { validators }) => {
  const { expiryValidator } = validators ?? {}
  const monthNotZero = (value: string) => {
    if (value && value.slice(0, 2) === '00') {
      return new Error('Month cannot be 00')
    }
  }


  // Return both the built-in validator and the custom month check.
  return [expiryValidator, monthNotZero]
}


render(<Field.Expiry onBlurValidator={myValidator} />)