<div class="text-input ">
<div class="text-input__pre">
<label class="text-input__label" for="credit-card">Credit Card</label>
</div>
<div class="text-input__inner">
<div class="text-input__credit-card-icon-wrapper">
<img class="text-input__credit-card-icon" src="../../images/creditcards/amex.png" />
</div><input type="text" class="text-input__input" placeholder="" value="XXXX XXXX XXXX 1234" name="creditCard" id="credit-card" readonly />
</div>
</div>
<div class="text-input {{class}}">
{{#if label}}
{{> @input-pre}}
{{/if}}
{{> @input-inner}}
</div>
{
"label": "Credit Card",
"placeholder": null,
"type": "text",
"id": "credit-card",
"name": "creditCard",
"creditCard": true,
"readonly": true,
"value": "XXXX XXXX XXXX 1234"
}
Credit Card inputs accept credit card numbers, display the matching vendor, and mask read-only values.
Only use the Credit Card input for credit card numbers.