Input text formatter
Format input text content when you are typing.
Input text formatting feature is enabled through the Cleave.js plugin. To use this component, make sure to include the required reference to the plugin's .js file before the closing </body> tag and above theme.min.js reference in your document:
<script src="assets/vendor/cleave.js/dist/cleave.min.js"></script>Payment card number
<!-- Input text formatted as a card number with updating card icon -->
<label for="card" class="form-label">Card number</label>
<div class="position-relative" data-input-format='{"creditCard": true}'>
<input type="text" class="form-control form-icon-end" id="card" placeholder="Enter card number">
<span class="position-absolute d-flex top-50 end-0 translate-middle-y fs-5 text-body-tertiary me-3" data-card-icon></span>
</div>Phone number
<!-- Input text formatted as a phone number -->
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone" data-input-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}' placeholder="+1 ___ ___ __">Date
<!-- Input text formatted as a full date -->
<div class="mb-3">
<label for="date" class="form-label">Date</label>
<input type="text" class="form-control" id="date" data-input-format='{"date": true, "delimiter": "-", "datePattern": ["Y", "m", "d"]}' placeholder="yyyy-mm-dd">
</div>
<!-- Input text formatted as a short date -->
<div class="mb-3">
<label for="date-short" class="form-label">Date short</label>
<input type="text" class="form-control" id="date-short" data-input-format='{"date": true, "datePattern": ["m", "y"]}' placeholder="mm/yy">
</div>Time
<!-- Input text formatted as a time -->
<label for="time" class="form-label">Time</label>
<input type="text" class="form-control" id="time" data-input-format='{"time": true, "timePattern": ["h", "m"]}' placeholder="hh:mm">Custom blocks
<!-- Custom input text format -->
<label for="custom" class="form-label">Custom blocks</label>
<input type="text" class="form-control" id="custom" data-input-format='{"blocks": [4, 3, 3, 4, 2], "delimiters": [".", " ", "/", "-"]}' placeholder="blocks:[4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-']">Prefix and uppercase
<!-- Input text formatted as uppercase with default prefix -->
<label for="prefix" class="form-label">Prefix + uppercase</label>
<input type="text" class="form-control" id="prefix" data-input-format='{"prefix": "PREFIX", "delimiter": "-", "blocks": [6, 4, 5, 3], "uppercase": true}'>