Documentation v8.1.1

Preview Downloads Purchase

Overview

Metronic comes with advanced custom form controls powered with the Bootstrap's base form elements mixed rich content for varuouse use case.

Radio Buttons Example 1

Build rich radio buttons group using data-kt-buttons="true"special attribute with Buttons and Form Controls components:

Startup

Best for startups

$ 39 / Mon

Advanced Most popular

Best for 100+ team size

$ 139 / Mon

Enterprise

Best value for 1000+ team

$ 339 / Mon

<!--begin::Radio group-->
<div data-kt-buttons="true">
    <!--begin::Radio button-->
    <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex flex-stack text-start p-6 mb-5">
        <!--end::Description-->
        <div class="d-flex align-items-center me-2">
            <!--begin::Radio-->
            <div class="form-check form-check-custom form-check-solid form-check-primary me-6">
                <input class="form-check-input" type="radio" name="plan" value="startup"/>
            </div>
            <!--end::Radio-->

            <!--begin::Info-->
            <div class="flex-grow-1">
                <h2 class="d-flex align-items-center fs-3 fw-bold flex-wrap">
                    Startup
                </h2>
                <div class="fw-semibold opacity-50">
                    Best for startups
                </div>
            </div>
            <!--end::Info-->
        </div>
        <!--end::Description-->

        <!--begin::Price-->
        <div class="ms-5">
            <span class="mb-2">$</span>
            <span class="fs-2x fw-bold">
                39
            </span>
            <span class="fs-7 opacity-50">/
                <span data-kt-element="period">Mon</span>
            </span>
        </div>
        <!--end::Price-->
    </label>
    <!--end::Radio button-->

    <!--begin::Radio button-->
    <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex flex-stack text-start p-6 mb-5 active">
        <!--end::Description-->
        <div class="d-flex align-items-center me-2">
            <!--begin::Radio-->
            <div class="form-check form-check-custom form-check-solid form-check-primary me-6">
                <input class="form-check-input" type="radio" name="plan" checked="checked" value="advanced"/>
            </div>
            <!--end::Radio-->

            <!--begin::Info-->
            <div class="flex-grow-1">
                <h2 class="d-flex align-items-center fs-3 fw-bold flex-wrap">
                    Advanced
                    <span class="badge badge-light-success ms-2 fs-7">Most popular</span>
                </h2>
                <div class="fw-semibold opacity-50">
                    Best for 100+ team size
                </div>
            </div>
            <!--end::Info-->
        </div>
        <!--end::Description-->

        <!--begin::Price-->
        <div class="ms-5">
            <span class="mb-2">$</span>
            <span class="fs-2x fw-bold">
                139
            </span>
            <span class="fs-7 opacity-50">/
                <span data-kt-element="period">Mon</span>
            </span>
        </div>
        <!--end::Price-->
    </label>
    <!--end::Radio button-->

    <!--begin::Radio button-->
    <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex flex-stack text-start p-6">
        <!--end::Description-->
        <div class="d-flex align-items-center me-2">
            <!--begin::Radio-->
            <div class="form-check form-check-custom form-check-solid form-check-primary me-6">
                <input class="form-check-input" type="radio" name="plan" value="enterprise"/>
            </div>
            <!--end::Radio-->

            <!--begin::Info-->
            <div class="flex-grow-1">
                <h2 class="d-flex align-items-center fs-3 fw-bold flex-wrap">
                    Enterprise
                </h2>
                <div class="fw-semibold opacity-50">
                    Best value for 1000+ team
                </div>
            </div>
            <!--end::Info-->
        </div>
        <!--end::Description-->

        <!--begin::Price-->
        <div class="ms-5">
            <span class="mb-2">$</span>
            <span class="fs-2x fw-bold">
                339
            </span>
            <span class="fs-7 opacity-50">/
                <span data-kt-element="period">Mon</span>
            </span>
        </div>
        <!--end::Price-->
    </label>
    <!--end::Radio button-->
</div>
<!--end::Radio group-->

data-kt-buttons="true"is used to handle buttons toggle state with .activeclass within the group.

Radio Buttons Example 2

Build a rich radio buttons group with Buttons, Form Controls and Duotune Icon components:

Authenticator Apps Get codes from an app like Google Authenticator, Microsoft Authenticator etc. SMS We will send a code via SMS if you need to use your backup login method.

<!--begin::Option-->
<input type="radio" class="btn-check" name="radio_buttons_2" value="apps" checked="checked"  id="kt_radio_buttons_2_option_1"/>
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary p-7 d-flex align-items-center mb-5" for="kt_radio_buttons_2_option_1">
    <!--begin::Svg Icon | path: icons/duotune/coding/cod001.svg-->
    <span class="svg-icon svg-icon-4x me-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        ....
        </svg>
    </span>
    <!--end::Svg Icon-->

    <span class="d-block fw-semibold text-start">
        <span class="text-dark fw-bold d-block fs-3">Authenticator Apps</span>
        <span class="text-muted fw-semibold fs-6">
            Get codes from an app like Google Authenticator,  Microsoft Authenticator, Authy or 1Password.
        </span>
    </span>
</label>
<!--end::Option-->

<!--begin::Option-->
<input type="radio" class="btn-check" name="radio_buttons_2" value="sms" id="kt_radio_buttons_2_option_2"/>
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary p-7 d-flex align-items-center" for="kt_radio_buttons_2_option_2">
    <!--begin::Svg Icon | path: icons/duotune/communication/com003.svg-->
    <span class="svg-icon svg-icon-4x me-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
        ....
        </svg>
    </span>
    <!--end::Svg Icon-->

    <span class="d-block fw-semibold text-start">
        <span class="text-dark fw-bold d-block fs-3">SMS</span>
        <span class="text-muted fw-semibold fs-6">We will send a code via SMS if you need to use your backup login method.</span>
    </span>
</label>
<!--end::Option-->

Radio Buttons Example 3

Build a rich radio buttons group with Buttons, Symbol and Duotune Icon components:

Quick Online Courses Creating a clear text structure is just one SEO Face to Face Discussions Creating a clear text structure is just one aspect Full Intro Training Creating a clear text structure copywriting

<!--begin:Option-->
<label class="d-flex flex-stack mb-5 cursor-pointer">
    <!--begin:Label-->
    <span class="d-flex align-items-center me-2">
        <!--begin:Icon-->
        <span class="symbol symbol-50px me-6">
            <span class="symbol-label bg-light-primary">
                <!--begin::Svg Icon | path: icons/duotune/maps/map004.svg-->
                <span class="svg-icon svg-icon-1 svg-icon-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    ....
                    </svg>
                </span>
                <!--end::Svg Icon-->
            </span>
        </span>
        <!--end:Icon-->

        <!--begin:Info-->
        <span class="d-flex flex-column">
            <span class="fw-bold fs-6">Quick Online Courses</span>
            <span class="fs-7 text-muted">Creating a clear text structure is just one SEO</span>
        </span>
        <!--end:Info-->
    </span>
    <!--end:Label-->

    <!--begin:Input-->
    <span class="form-check form-check-custom form-check-solid">
        <input class="form-check-input" type="radio"  name="category" value="1"/>
    </span>
    <!--end:Input-->
</label>
<!--end::Option-->

<!--begin:Option-->
<label class="d-flex flex-stack mb-5 cursor-pointer">
    <!--begin:Label-->
    <span class="d-flex align-items-center me-2">
        <!--begin:Icon-->
        <span class="symbol symbol-50px me-6">
            <span class="symbol-label bg-light-danger">
                <!--begin::Svg Icon | path: icons/duotune/general/gen025.svg-->
                <span class="svg-icon svg-icon-1 svg-icon-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    ....
                    </svg>
                </span>
                <!--end::Svg Icon-->
            </span>
        </span>
        <!--end:Icon-->

        <!--begin:Info-->
        <span class="d-flex flex-column">
            <span class="fw-bold fs-6">Face to Face Discussions</span>
            <span class="fs-7 text-muted">Creating a clear text structure is just one aspect</span>
        </span>
        <!--end:Info-->
    </span>
    <!--end:Label-->

    <!--begin:Input-->
    <span class="form-check form-check-custom form-check-solid">
        <input class="form-check-input" type="radio" name="category" value="2"/>
    </span>
    <!--end:Input-->
</label>
<!--end::Option-->

<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer">
    <!--begin:Label-->
    <span class="d-flex align-items-center me-2">
        <!--begin:Icon-->
        <span class="symbol symbol-50px me-6">
            <span class="symbol-label bg-light-success">
                <!--begin::Svg Icon | path: icons/duotune/general/gen013.svg-->
                <span class="svg-icon svg-icon-1 svg-icon-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    ....
                    </svg>
                </span>
                <!--end::Svg Icon-->
            </span>
        </span>
        <!--end:Icon-->

        <!--begin:Info-->
        <span class="d-flex flex-column">
            <span class="fw-bold fs-6">Full Intro Training</span>
            <span class="fs-7 text-muted">Creating a clear text structure copywriting</span>
        </span>
        <!--end:Info-->
    </span>
    <!--end:Label-->

    <!--begin:Input-->
    <span class="form-check form-check-custom form-check-solid">
        <input class="form-check-input" type="radio" name="category" value="3"/>
    </span>
    <!--end:Input-->
</label>
<!--end::Option-->

Radio Buttons Example 4

Build rich radio buttons group using data-kt-buttons="true"special attribute with Buttons, Form Controls and Duotune Icon components:

Specify Your API Method

If you need more info, please check budget planning

Open API SQL Call UI/UX Docs

<!--begin::Radio group-->
<div class="btn-group w-100 w-lg-50" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button]">
    <!--begin::Radio-->
    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success" data-kt-button="true">
        <!--begin::Input-->
        <input class="btn-check" type="radio" name="method" value="1"/>
        <!--end::Input-->
        Open API
    </label>
    <!--end::Radio-->

    <!--begin::Radio-->
    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success active" data-kt-button="true">
        <!--begin::Input-->
        <input class="btn-check" type="radio" name="method" checked="checked" value="2"/>
        <!--end::Input-->
        SQL Call
    </label>
    <!--end::Radio-->

    <!--begin::Radio-->
    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success" data-kt-button="true">
        <!--begin::Input-->
        <input class="btn-check" type="radio" name="method" value="3" />
        <!--end::Input-->
        UI/UX
    </label>
    <!--end::Radio-->

    <!--begin::Radio-->
    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success" data-kt-button="true">
        <!--begin::Input-->
        <input class="btn-check" type="radio" name="method" value="4"  />
        <!--end::Input-->
        Docs
    </label>
    <!--end::Radio-->
</div>
<!--end::Radio group-->

Checkbox with Label

With <label>tag make custom checkbox input with label and description:

Save Card for further billing?

If you need more info, please check budget planning

Save Card

<!--begin::Input group-->
<div class="d-flex flex-stack w-lg-50">
    <!--begin::Label-->
    <div class="me-5">
        <label class="fs-6 fw-semibold form-label">Save Card for further billing?</label>
        <div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
    </div>
    <!--end::Label-->

    <!--begin::Switch-->
    <label class="form-check form-switch form-check-custom form-check-solid">
        <input class="form-check-input" type="checkbox" value="1" checked="checked"/>
        <span class="form-check-label fw-semibold text-muted">
            Save Card
        </span>
    </label>
    <!--end::Switch-->
</div>
<!--end::Input group-->

Input with Icon

Build a custom input control with Form Controls and Duotune Icon components:

<!--begin::Input wrapper-->
<div class="w-lg-50 position-relative">
    <!--begin::Input-->
    <input type="text" class="form-control form-control-solid" minlength="3" maxlength="4" placeholder="CVV" name="card_cvv"/>
    <!--end::Input-->

    <!--begin::CVV icon-->
    <div class="position-absolute translate-middle-y top-50 end-0 me-3">
        <!--begin::Svg Icon | path: icons/duotune/finance/fin002.svg-->
        <span class="svg-icon svg-icon-2hx">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            ....
            </svg>
        </span>
        <!--end::Svg Icon-->
    </div>
    <!--end::CVV icon-->
</div>
<!--end::Input wrapper-->

Build a custom input field that can copy the input value into your clipboard by button action. This input field uses ChipboardJSto copy the values.

var button = document.querySelector('#kt_share_earn_link_copy_button');
var input = document.querySelector('#kt_share_earn_link_input');
var clipboard = new ClipboardJS(button);

if (!clipboard) {
    return;
}

//  Copy text to clipboard. For more info check the plugin's documentation: https://clipboardjs.com/
clipboard.on('success', function(e) {
    var buttonCaption = button.innerHTML;
    //Add bgcolor
    input.classList.add('bg-success');
    input.classList.add('text-inverse-success');

    button.innerHTML = 'Copied!';

    setTimeout(function() {
        button.innerHTML = buttonCaption;

        // Remove bgcolor
        input.classList.remove('bg-success');
        input.classList.remove('text-inverse-success');
    }, 3000);  // 3seconds

    e.clearSelection();
        });

<!--begin::Input wrapper-->
<div class="w-100">
    <!--begin::Title-->
    <h4 class="fs-5 fw-semibold text-gray-800">Share my referral link with friends</h4>
    <!--end::Title-->

    <!--begin::Title-->
    <div class="d-flex">
        <input id="kt_share_earn_link_input" type="text" class="form-control form-control-solid me-3 flex-grow-1"
        name="search" value="https://keenthemes.com/?ref=keenthemes_user" />

        <button id="kt_share_earn_link_copy_button" class="btn btn-light fw-bold flex-shrink-0"
        data-clipboard-target="#kt_share_earn_link_input">Copy Link</button>
    </div>
    <!--end::Title-->
</div>
<!--end::Input wrapper-->

Interactive Button Values

Build a custom input group where button click actions will update the input values.

Options

JAVASCRIPT
HTML

const options = document.querySelectorAll('[data-kt-docs-advanced-forms="interactive"]');
const inputEl = document.querySelector('[name="interactive_amount"]');
options.forEach(option => {
    option.addEventListener('click', e => {
        e.preventDefault();

        inputEl.value = e.target.innerText;
    });
});

<!--begin::Input wrapper-->
<div class="d-flex flex-column mb-8 fv-row">
    <!--begin::Label-->
    <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
        <span class="required">Options</span>
        <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Select an option."></i>
    </label>
    <!--end::Label-->

    <!--begin::Buttons-->
    <div class="d-flex flex-stack gap-5 mb-3">
        <button type="button" class="btn btn-light-primary w-100" data-kt-docs-advanced-forms="interactive">10</button>
        <button type="button" class="btn btn-light-primary w-100" data-kt-docs-advanced-forms="interactive">50</button>
        <button type="button" class="btn btn-light-primary w-100" data-kt-docs-advanced-forms="interactive">100</button>
    </div>
    <!--begin::Buttons-->

    <input type="text" class="form-control form-control-solid" placeholder="Enter Amount" name="amount" />
</div>
<!--end::Input wrapper-->

Interactive Slider

Build a custom slider based on noUISliderwith a custom interactive label.

Daily Budget

$ .00

JAVASCRIPT
HTML

var budgetSlider = document.querySelector("#kt_docs_forms_advanced_interactive_slider");
var budgetValue = document.querySelector("#kt_docs_forms_advanced_interactive_slider_label");

noUiSlider.create(budgetSlider, {
    start: [5],
    connect: true,
    range: {
        "min": 1,
        "max": 500
    }
});

budgetSlider.noUiSlider.on("update", function (values, handle) {
    budgetValue.innerHTML = Math.round(values[handle]);
    if (handle) {
        budgetValue.innerHTML = Math.round(values[handle]);
    }
});

<!--begin::Input wrapper-->
<div class="w-lg-50">
    <!--begin::Label-->
    <label class="fs-6 fw-semibold mb-2">
        Daily Budget
        <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Choose the budget allocated for each day. Higher budget will generate better results"></i>
    </label>
    <!--end::Label-->

    <!--begin::Slider-->
    <div class="d-flex flex-column text-center">
        <div class="d-flex align-items-start justify-content-center mb-7">
            <span class="fw-bold fs-4 mt-1 me-2">$</span>
            <span class="fw-bold fs-3x" id="kt_modal_create_campaign_budget_label"></span>
            <span class="fw-bold fs-3x">.00</span>
        </div>
        <div id="kt_modal_create_campaign_budget_slider" class="noUi-sm"></div>
    </div>
    <!--end::Slider-->
</div>
<!--end::Input wrapper-->