Norsk Tipping Design System

ExpDateInput

A text input field for expiration date for the credit card inputs

STATUS: This component is in preview.
  • The prop-interface has pretty much stabilized
  • The component has typically been tested out in the field
  • Consult the design team for usage
  • As always: Your feedback is welcomed!

The ExpDateInput field is used during a payment flow to type in the expiry date. Below is the simplest example, only the input field with the numbers visible to the user and a descriptive calendar icon on the left.

Basic usage

In most use-cases the it is also useful to include a label for more information about the input.

Labels usage

By default, the ExpDateInput displays a calendar icon on the left side. Hide this by using the hideIcon-prop.

Hidden icon usage

The expiry date input also provides error handling.

Error usage

On this page