CardNumberInput
A text input field for 16-digits 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 CardNumberInput field is used during a payment flow to type in the credit card number. Below is the simplest example: the input with its label and a descriptive card icon on the left.
Basic usage
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 or a <label> of your own.
Labels usage
By default, the CardNumberInput displays a card icon on the left side. Hide this by using the hideIcon-prop.
Hidden icon usage
The card number input also provides error handling.