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 />)

Demos

The locale is what determines the components placeholder format .e.g. mm/åå in norwegian, mm/yy 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

Utløpsdato
Code Editor
<Field.Expiry onChange={(expiry) => console.log('onChange', expiry)} />

Label

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

With help

Label text
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={(expiry) => console.log('onChange', expiry)}
/>

Disabled

Label text
Code Editor
<Field.Expiry
  value="0826"
  label="Label text"
  onChange={(expiry) => console.log('onChange', expiry)}
  disabled
/>

Error

Label text
This is what is wrong...
Code Editor
<Field.Expiry
  value="0326"
  label="Label text"
  onChange={(expiry) => console.log('onChange', expiry)}
  error={new FormError('This is what is wrong...')}
/>

Validation - Required

Label text
Code Editor
<Field.Expiry
  value="0826"
  label="Label text"
  onChange={(expiry) => console.log('onChange', expiry)}
  required
/>