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:

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

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