Documentation v8.0.36

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

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

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
$ 939
Custom License
Reach us for custom license offers.
Buy Now
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