Heartwood

Credit Card Input 

<!-- Default -->
<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="" name="creditCard" id="credit-card" />
    </div>
</div>


<!-- Read Only -->
<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>
 
/* Default */
{
  "label": "Credit Card",
  "placeholder": null,
  "type": "text",
  "id": "credit-card",
  "name": "creditCard",
  "creditCard": true
}


/* Read Only */
{
  "label": "Credit Card",
  "placeholder": null,
  "type": "text",
  "id": "credit-card",
  "name": "creditCard",
  "creditCard": true,
  "readonly": true,
  "value": "XXXX XXXX XXXX 1234"
}

Credit Card

Credit Card inputs accept credit card numbers, display the matching vendor, and mask read-only values.

When to use:

Only use the Credit Card input for credit card numbers.

When not to use:

  • When not asking for or displaying a credit card number; use another type of input.