Logo

Documentation v1.0.6

  • Base
  • Forms
  • Advanced
Preview Upgrade to Pro

Overview

Jet HTML Free 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 .active class 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
<!--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:
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-->

Share Input Values

Build a custom input field that can copy the input value into your clipboard by button action. This input field uses ChipboardJS to 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. 
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 noUISlider with a custom interactive label.
$ .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-->
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
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
From guides and how-tos, to live demos and code examples to get started right away.
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.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now