Overview

This is an option added by extending Bootstrap forms to accommodate a variety of 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 data-kt-buttons="true">
  <!--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">
    <!--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-bold flex-wrap">Startup</h2>
        <div class="fw-semibold 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-bold">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 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">
        <h2 class="d-flex align-items-center fs-3 fw-bold flex-wrap">Advanced<span class="badge badge-light-success ms-2 fs-7">Most popular</span></h2>
        <div class="fw-semibold 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-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">
    <!--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-bold flex-wrap">Enterprise</h2>
        <div class="fw-semibold 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-bold">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-->

Radio Buttons Example 2

Build a rich radio buttons group with Buttons, Form Controls  and Keenicons  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-active-light-primary p-7 d-flex align-items-center mb-5" for="kt_radio_buttons_2_option_1">
  <i class="ki-duotone ki-setting-2 fs-4x me-4"><span class="path1"></span><span class="path2"></span></i>
  <span class="d-block fw-semibold text-start">
    <span class="text-dark fw-bold d-block fs-3">Authenticator Apps</span>
    <span class="text-muted fw-semibold 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-active-light-primary p-7 d-flex align-items-center" for="kt_radio_buttons_2_option_2">
  <i class="ki-duotone ki-message-text-2 fs-4x me-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
  <span class="d-block fw-semibold text-start">
    <span class="text-dark fw-bold d-block fs-3">SMS</span>
    <span class="text-muted fw-semibold 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 Keenicons  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">
        <i class="ki-duotone ki-compass fs-1 text-primary"><span class="path1"></span><span class="path2"></span></i>
      </span>
    </span>
    <!--end:Icon-->
    <!--begin:Info-->
    <span class="d-flex flex-column">
      <span class="fw-bold 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">
        <i class="ki-duotone ki-element-11 fs-1 text-danger"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
      </span>
    </span>
    <!--end:Icon-->
    <!--begin:Info-->
    <span class="d-flex flex-column">
      <span class="fw-bold 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">
        <i class="ki-duotone ki-timer fs-1 text-success"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
      </span>
    </span>
    <!--end:Icon-->
    <!--begin:Info-->
    <span class="d-flex flex-column">
      <span class="fw-bold 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 Keenicons  components:
If you need more info, please check budget planning
          <!--begin::Heading-->
<div class="mb-3">
  <!--begin::Label-->
  <label class="d-flex align-items-center fs-5 fw-semibold">
    <span class="required">Specify Your API Method</span>
    <span class="m2-1" data-bs-toggle="tooltip" title="Your billing numbers will be calculated based on your API method">
      <i class="ki-duotone ki-information fs-7"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
    </span>
  </label>
  <!--end::Label-->
  <!--begin::Description-->
  <div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
  <!--end::Description-->
</div>
<!--end::Heading-->
<!--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 btn-color-muted 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 btn-color-muted 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 btn-color-muted 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 btn-color-muted 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-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 Keenicons  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" />
  <!--end::Input-->
  <!--begin::CVV icon-->
  <div class="position-absolute translate-middle-y top-50 end-0 me-3">
    <i class="ki-duotone ki-credit-cart fs-2hx"><span class="path1"></span><span class="path2"></span></i>
  </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

              <!--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="input" type="text" class="form-control form-control-solid me-3 flex-grow-1" value="https://example.com" />
    <button id="copy" class="btn btn-light fw-bold flex-shrink-0" data-clipboard-target="#input">Copy Link</button>
  </div>
  <!--end::Title-->
</div>
<!--end::Input wrapper-->
            
              // Copy button and the element to be copied.
const button = document.getElementById('copy');
const input = document.getElementById('input');

// Initialize the component and set up event listeners.
const clipboard = new ClipboardJS(button);

clipboard.on('success', event => {
  // Save the current caption of the button.
  const caption = button.innerHTML;
  
  //　Change the style of the input element being copied.
  input.classList.add('bg-success');
  input.classList.add('text-inverse-success');

  // Copy button caption to "copied".
  button.innerHTML = 'Copied!';

  // After a certain time, the input element's style and button caption are restored to the way they were before copying.
  setTimeout(() => {
    button.innerHTML = caption;
    input.classList.remove('bg-success');
    input.classList.remove('text-inverse-success');
  }, 3000);

  // Deselects the input element.
  event.clearSelection();
});

Interactive Button Values

Build a custom input group where button click actions will update the input values. 
              <!--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-semibold mb-2">
    <span class="required">Options</span>
    <span class="ms-1" data-bs-toggle="tooltip" title="Select an option.">
      <i class="ki-duotone ki-information text-gray-500 fs-7"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
    </span>
  </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-dvanced-forms="interactive">10</button>
    <button type="button" class="btn btn-light-primary w-100" data-dvanced-forms="interactive">50</button>
    <button type="button" class="btn btn-light-primary w-100" data-dvanced-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-->
            
              // Initialize Interactive Button.
const options = document.querySelectorAll('[data-dvanced-forms="interactive"]');
const input = document.querySelector('[name="amount"]');

// The value selected in the button group is reflected in the input element.
options.forEach(option => {
  option.addEventListener('click', event => {
    event.preventDefault();
    input.value = event.target.innerText;
  });
});

Interactive Slider

Custom slider using noUISlider.
$ .00 
              <!--begin::Input wrapper-->
<div class="w-lg-50">
  <!--begin::Label-->
  <label class="fs-6 fw-semibold mb-2">
    Daily Budget
    <span class="m2-1" data-bs-toggle="tooltip" title="Choose the budget allocated for each day. Higher budget will generate better results">
      <i class="ki-duotone ki-information fs-7"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
    </span>
  </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-bold fs-4 mt-1 me-2">$</span>
      <span class="fw-bold fs-3x" id="sliderLabel"></span>
      <span class="fw-bold fs-3x">.00</span>
    </div>
    <div id="slider" class="noUi-sm"></div>
  </div>
  <!--end::Slider-->
</div>
<!--end::Input wrapper-->
            
              // Initialize Interactive Slider.
var slider = document.getElementById('slider');
var label = document.getElementById('sliderLabel');
noUiSlider.create(slider, {
  start: [5],
  connect: true,
  range: {
    min: 1,
    max: 500
  }
});

slider.noUiSlider.on("update", (values, handle) => {
  label.innerHTML = Math.round(values[handle]);
  if (handle)
    label.innerHTML = Math.round(values[handle]);
});