Cartzilla component

# 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

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

Phone

    <!-- 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

Date
Date short

    <!-- 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

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 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

Prefix + 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}'>

Top