Overview
Good 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
<!--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
<!--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
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.
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.
$
.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-->
2022©
Keenthemes
