Documentation v8.1.5

Preview Downloads Purchase
FormValidation creates an interface to add and remove a repeatable group of input elements. For more info see the official Github repository.

Advanced Example

    initEmpty: false,

    defaultValues: {
        'text-input': 'foo'

    show: function () {

        // Re-init select2

        // Re-init flatpickr

        // Re-init tagify
        new Tagify(this.querySelector('[data-kt-repeater="tagify"]'));

    hide: function (deleteElement) {

    ready: function(){
        // Init select2

        // Init flatpickr

        // Init Tagify
        new Tagify(document.querySelector('[data-kt-repeater="tagify"]'));
<div id="kt_docs_repeater_advanced">
    <!--begin::Form group-->
    <div class="form-group">
        <div data-repeater-list="kt_docs_repeater_advanced">
            <div data-repeater-item>
                <div class="form-group row mb-5">
                    <div class="col-md-3">
                        <label class="form-label">Select Options:</label>
                        <select class="form-select" data-kt-repeater="select2" data-placeholder="Select an option">
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                    <div class="col-md-3">
                        <label class="form-label">Datepicker:</label>
                        <input class="form-control" data-kt-repeater="datepicker" placeholder="Pick a date" />
                    <div class="col-md-4">
                        <label class="form-label">Tags:</label>
                        <input class="form-control" data-kt-repeater="tagify" value="tag1, tag2, tag3"/>
                    <div class="col-md-2">
                        <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mt-3 mt-md-9">
                            <i class="la la-trash-o fs-3"></i>Delete
    <!--end::Form group-->

    <!--begin::Form group-->
    <div class="form-group">
        <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
            <i class="la la-plus"></i>Add
    <!--end::Form group-->
Learn & Get Inspired

Support at

Join our developers community to find answer to your question and help others. FAQs
Get Support
Video Tutorials
From guides and how-tos, to live demos and code examples to get started right away.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now