Logo

Documentation v8.1.5

  • Home
  • Forms
  • Advanced
Preview Downloads Purchase
Light
Dark
System

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:
<!--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:
<!--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:
<!--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:
If you need more info, please check budget planning
<!--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 btn-color-muted 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 btn-color-muted 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 btn-color-muted 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 btn-color-muted 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:
If you need more info, please check budget planning
<!--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-->

Share Input Values

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.

Share my referral link with friends

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.
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.
$ 5 .00 
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-->
Learn & Get Inspired

Support at devs.keenthemes.com

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