# Documentation v8.0.38

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 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-bolder flex-wrap">
                        Startup
                    </h2>
                    <div class="fw-bold 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-bolder">
                    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 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-bolder flex-wrap">
                        Advanced
                        <span class="badge badge-light-success ms-2 fs-7">Most popular</span>
                    </h2>
                    <div class="fw-bold 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-bolder">
                    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 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-bolder flex-wrap">
                        Enterprise
                    </h2>
                    <div class="fw-bold 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-bolder">
                    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 `.active`class 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, Authy or 1Password.
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-outline-default 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-bold text-start">
            <span class="text-dark fw-bolder d-block fs-3">Authenticator Apps</span>
            <span class="text-muted fw-bold 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-outline-default 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-bold text-start">
            <span class="text-dark fw-bolder d-block fs-3">SMS</span>
            <span class="text-muted fw-bold 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-bolder 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-bolder 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-bolder 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-bold form-label">Save Card for further billing?</label>
            <div class="fs-7 fw-bold 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-bold 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-lg-50">
        <!--begin::Title-->
        <h4 class="fs-5 fw-bold 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-bolder 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

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

    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-bold 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-bolder fs-4 mt-1 me-2">$</span>
                <span class="fw-bolder fs-3x" id="kt_modal_create_campaign_budget_label"></span>
                <span class="fw-bolder fs-3x">.00</span>
            </div>
            <div id="kt_modal_create_campaign_budget_slider" class="noUi-sm"></div>
        </div>
        <!--end::Slider-->
    </div>
    <!--end::Input wrapper-->

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
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