# Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

Requires JS.
assets/js/vendors/cleave-function.js
Note that this component requires the use of the third-party cleave.js plugin.

### Credit card

Credit card number

    <div class="mb-3">
    <label for="cc-mask" class="form-label">Credit card number</label>
    <input type="text" class="form-control input-credit-card" id="cc-mask" placeholder="xxxx-xxxx-xxxx-xxxx" required="" />
    </div>

### Phone number

Phone number

    <div class="mb-3">
    <label for="phone" class="form-label">Phone number</label>
    <input type="text" class="form-control input-phone" id="phone" placeholder="+1 4XX XXX XXXX" required="" />
    </div>

### Date formatting

Date
Date

    <div class="mb-3">
    <label for="dateMonth" class="form-label">Date</label>
    <input type="text" class="form-control input-date-formatting" id="dateMonth" placeholder="YYYY-MM-DD" required="" />
    </div>
    <div class="mb-3">
    <label for="dateMonthOne" class="form-label">Date</label>
    <input type="text" class="form-control input-date-formate" id="dateMonthOne" placeholder="MM/YY" required="" />
    </div>

### Time formatting

Time
Time

    <div class="mb-3">
    <label for="timeMonth" class="form-label">Time</label>
    <input type="tel" class="form-control input-time-formatting" id="timeMonth" placeholder="HH:MM:SS" required="" />
    </div>
    <div class="mb-3">
    <label for="timeMonthOne" class="form-label">Time</label>
    <input type="tel" class="form-control input-time-formate" id="timeMonthOne" placeholder="HH:MM" required="" />
    </div>

### Numeral formatting

Numeral formatting

    <div class="mb-3">
    <label for="numeral" class="form-label">Numeral formatting</label>
    <input type="text" class="form-control input-numeral-formatting" id="numeral" placeholder="Enter numeral" required />
    </div>

### Custom options

Block option
Delimiter option
Delimiters option
Prefix option

    <div class="mb-3">
    <label for="block" class="form-label">Block option</label>
    <input type="text" class="form-control input-block" id="block" placeholder="Blocks: [4, 3, 3, 4]" required />
    </div>
    <div class="mb-3">
    <label for="delimiter" class="form-label">Delimiter option</label>
    <input type="text" class="form-control input-delimiter" id="delimiter" placeholder="Delimiter: '.'" required />
    </div>
    <div class="mb-3">
    <label for="delimiters" class="form-label">Delimiters option</label>
    <input type="text" class="form-control input-delimiters" id="delimiters" placeholder="Delimiter: '.''.''-'" required />
    </div>
    <div class="mb-3">
    <label for="prefix" class="form-label">Prefix option</label>
    <input type="text" class="form-control input-prefix" id="prefix" placeholder="PRFIX" required />
    </div>