Logo

Documentation v4.0.0

  • Home
  • Initializers
  • initBtnToggle
Light
Dark
System

Overview

initBtnToggle initializes toggle behavior on button groups that use the data-kt-buttons="true" attribute. Clicking a button adds the active class and removes it from siblings, creating a radio-button-like selection.

Import

import {initializers} from 'metronic-extension';
const {initBtnToggle} = initializers;

Signature

initBtnToggle(element: string | HTMLElement): void
Parameter Type Description
element string | HTMLElement CSS selector string or HTMLElement. The element (or its descendants) should contain data-kt-buttons="true" groups.

Example

Click an option to toggle it. The selected option gets the active class.
<div id="btnToggleContainer" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
  <div class="row g-9">
    <div class="col">
      <label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
        <span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
          <input class="form-check-input" type="radio" name="dealType" value="1" checked="checked">
        </span>
        <span class="ms-5">
          <span class="fs-4 fw-bold text-gray-800 mb-2 d-block">Personal Deal</span>
          <span class="fw-semibold fs-7 text-gray-600">Best for individual use</span>
        </span>
      </label>
    </div>
    <div class="col">
      <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
        <span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
          <input class="form-check-input" type="radio" name="dealType" value="2">
        </span>
        <span class="ms-5">
          <span class="fs-4 fw-bold text-gray-800 mb-2 d-block">Corporate Deal</span>
          <span class="fw-semibold fs-7 text-gray-600">Manage multiple users</span>
        </span>
      </label>
    </div>
  </div>
</div>

import {initializers} from 'metronic-extension';
const {initBtnToggle} = initializers;

initBtnToggle('#btnToggleContainer');
Previous Validation Next initClipboard