HTML Version
Vue3 VersionAdvanced
Overview
Advanced custom form controls, powered by Bootstrap's base form elements and enriched with rich content, cater to various use cases.
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 class="w-lg-50" data-kt-buttons="true" data-kt-initialized="1">
<!--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">
<div class="d-flex align-items-center me-2">
<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>
<div class="flex-grow-1">
<h3 class="d-flex align-items-center flex-wrap">Startup</h3>
<p class="mb-0">Best for startups</p>
</div>
</div>
<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>
</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">
<h3 class="d-flex align-items-center fs-3 fw-bold flex-wrap">Advanced <span class="badge badge-primary ms-3">Most popular</span></h3>
<p class="mb-0">Best for 100+ team size</p>
</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">
<div class="d-flex align-items-center me-2">
<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>
<div class="flex-grow-1">
<h3 class="d-flex align-items-center flex-wrap">Enterprise</h3>
<p class="mb-0">Best value for 1000+ team</p>
</div>
</div>
<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>
</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
<!--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-5 d-flex align-items-center mb-5" for="kt_radio_buttons_2_option_1">
<span class="me-4"><i class="far fa-envelope fs-2x"></i></span>
<span class="d-block fw-semibold text-start">
<h3 class="text-dark fw-bold d-block">Authenticator Apps</h3>
<span class="text-dark">
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-5 d-flex align-items-center" for="kt_radio_buttons_2_option_2">
<span class="me-4"><i class="far fa-envelope fs-2x"></i></span>
<span class="d-block fw-semibold text-start">
<h3 class="text-dark fw-bold d-block">SMS</h3>
<span class="text-dark">We will send a code via SMS if you need to use your backup login method.</span>
</span>
</label>
<!--end::Option-->
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-->