Norsk Tipping Design System

CvcInput

A text input field for three-digits CVC codes.

The CVC-input field is used during a payment flow to type in the verification code for the card. Below is the simplest example: the input with its label. hideDetails removes the details below the input.

Basic usage

These three-digit numbers is in most cases visible by default, but can also be hidden for special cases. If provided the option to hide the number, it is hidden by default and have to actively be toggled visible again.

Hidden usage

In most use-cases it is also useful to keep the Details below the input, for more information about the CVC-code. label renders a visible label that names the input. Without it, no label renders, and the input must be named another way, such as with aria-label.

Labels usage

The CVC input should also provide error handling in cases where it is required to fill in.

Error usage

On this page