Skip to content
Home

Expiry

Info
Demos
Properties
Events

Description

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

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

The locale is what determines the components placeholder format .e.g. mm/yy in norwegian and yy/mm in english.

English (US) is not included in Eufemia by default. You can include it like:

import enUS from '@dnb/eufemia/shared/locales/en-US'
<EufemiaProvider locale={enUS} ...>
	App
</EufemiaProvider>

Demos

Empty

Code Editor
<Field.Expiry
  onChange={({ month, year }) =>
    console.log('onChange', {
      month,
      year,
    })
  }
/>

Placeholder

Code Editor
<Field.Expiry
  placeholder="Enter a date"
  onChange={({ month, year }) =>
    console.log('onChange', {
      month,
      year,
    })
  }
/>

Label

Code Editor
<Field.Expiry
  label="Label text"
  onChange={({ month, year }) =>
    console.log('onChange', {
      month,
      year,
    })
  }
/>

With help

Code Editor
<Field.Expiry
  label="Label text"
  help={{
    title: 'Help is available',
    contents:
      'Kindness and helping others will return to you when you least expect it, and maybe when you need it.',
  }}
  onChange={({ month, year }) =>
    console.log('onChange', {
      month,
      year,
    })
  }
/>

Disabled

Code Editor
<Field.Expiry
  value="2023-01-16"
  label="Label text"
  onChange={({ month, year }) =>
    console.log('onChange', {
      month,
      year,
    })
  }
  disabled
/>

Error

This is what is wrong...
Code Editor
<Field.Expiry
  value="2023-01-16"
  label="Label text"
  onChange={({ month, year }) =>
    console.log('onChange', {
      month,
      year,
    })
  }
  error={new FormError('This is what is wrong...')}
/>

Validation - Required

Code Editor
<Field.Expiry
  value="2023-01-16"
  label="Label text"
  onChange={({ month, year }) =>
    console.log('onChange', {
      month,
      year,
    })
  }
  required
/>