Overview
Metronic comes with advanced custom form controls powered with the Bootstrap's base form elements mixed rich content for varuouse use case.
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.
<!--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-->
<!--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-->
Checkbox with Label
With
<label>
tag make custom checkbox input with label and description:
<!--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-->
<!--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-->