<!--begin::Option--><inputtype="radio"class="btn-check"name="radio_buttons_2"value="apps"checked="checked"id="kt_radio_buttons_2_option_1"/><labelclass="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"><iclass="ki-duotone ki-setting-2 fs-4x me-4"><spanclass="path1"></span><spanclass="path2"></span></i><spanclass="d-block fw-semibold text-start"><spanclass="text-gray-900 fw-bold d-block fs-3">Authenticator Apps</span><spanclass="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--><inputtype="radio"class="btn-check"name="radio_buttons_2"value="sms"id="kt_radio_buttons_2_option_2"/><labelclass="btn btn-outline btn-outline-dashed btn-active-light-primary p-7 d-flex align-items-center"for="kt_radio_buttons_2_option_2"><iclass="ki-duotone ki-message-text-2 fs-4x me-4"><spanclass="path1"></span><spanclass="path2"></span><spanclass="path3"></span></i><spanclass="d-block fw-semibold text-start"><spanclass="text-gray-900 fw-bold d-block fs-3">SMS</span><spanclass="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-->
<!--begin:Option--><labelclass="d-flex flex-stack mb-5 cursor-pointer"><!--begin:Label--><spanclass="d-flex align-items-center me-2"><!--begin:Icon--><spanclass="symbol symbol-50px me-6"><spanclass="symbol-label bg-light-primary"><iclass="ki-duotone ki-compass fs-1 text-primary"><spanclass="path1"></span><spanclass="path2"></span></i></span></span><!--end:Icon--><!--begin:Info--><spanclass="d-flex flex-column"><spanclass="fw-bold fs-6">Quick Online Courses</span><spanclass="fs-7 text-muted">Creating a clear text structure is just one SEO</span></span><!--end:Info--></span><!--end:Label--><!--begin:Input--><spanclass="form-check form-check-custom form-check-solid"><inputclass="form-check-input"type="radio"name="category"value="1"/></span><!--end:Input--></label><!--end::Option--><!--begin:Option--><labelclass="d-flex flex-stack mb-5 cursor-pointer"><!--begin:Label--><spanclass="d-flex align-items-center me-2"><!--begin:Icon--><spanclass="symbol symbol-50px me-6"><spanclass="symbol-label bg-light-danger"><iclass="ki-duotone ki-element-11 fs-1 text-danger"><spanclass="path1"></span><spanclass="path2"></span><spanclass="path3"></span><spanclass="path4"></span></i></span></span><!--end:Icon--><!--begin:Info--><spanclass="d-flex flex-column"><spanclass="fw-bold fs-6">Face to Face Discussions</span><spanclass="fs-7 text-muted">Creating a clear text structure is just one aspect</span></span><!--end:Info--></span><!--end:Label--><!--begin:Input--><spanclass="form-check form-check-custom form-check-solid"><inputclass="form-check-input"type="radio"name="category"value="2"/></span><!--end:Input--></label><!--end::Option--><!--begin:Option--><labelclass="d-flex flex-stack cursor-pointer"><!--begin:Label--><spanclass="d-flex align-items-center me-2"><!--begin:Icon--><spanclass="symbol symbol-50px me-6"><spanclass="symbol-label bg-light-success"><iclass="ki-duotone ki-timer fs-1 text-success"><spanclass="path1"></span><spanclass="path2"></span><spanclass="path3"></span></i></span></span><!--end:Icon--><!--begin:Info--><spanclass="d-flex flex-column"><spanclass="fw-bold fs-6">Full Intro Training</span><spanclass="fs-7 text-muted">Creating a clear text structure copywriting</span></span><!--end:Info--></span><!--end:Label--><!--begin:Input--><spanclass="form-check form-check-custom form-check-solid"><inputclass="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::Heading--><divclass="mb-3"><!--begin::Label--><labelclass="d-flex align-items-center fs-5 fw-semibold"><spanclass="required">Specify Your API Method</span><spanclass="m2-1"data-bs-toggle="tooltip"title="Your billing numbers will be calculated based on your API method"><iclass="ki-duotone ki-information fs-7"><spanclass="path1"></span><spanclass="path2"></span><spanclass="path3"></span></i></span></label><!--end::Label--><!--begin::Description--><divclass="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div><!--end::Description--></div><!--end::Heading--><!--begin::Radio group--><divclass="btn-group w-100 w-lg-50"data-kt-buttons="true"data-kt-buttons-target="[data-kt-button]"><!--begin::Radio--><labelclass="btn btn-outline btn-color-muted btn-active-success"data-kt-button="true"><!--begin::Input--><inputclass="btn-check"type="radio"name="method"value="1"/><!--end::Input-->
Open API
</label><!--end::Radio--><!--begin::Radio--><labelclass="btn btn-outline btn-color-muted btn-active-success active"data-kt-button="true"><!--begin::Input--><inputclass="btn-check"type="radio"name="method"checked="checked"value="2"/><!--end::Input-->
SQL Call
</label><!--end::Radio--><!--begin::Radio--><labelclass="btn btn-outline btn-color-muted btn-active-success"data-kt-button="true"><!--begin::Input--><inputclass="btn-check"type="radio"name="method"value="3"/><!--end::Input-->
UI/UX
</label><!--end::Radio--><!--begin::Radio--><labelclass="btn btn-outline btn-color-muted btn-active-success"data-kt-button="true"><!--begin::Input--><inputclass="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--><divclass="d-flex flex-stack w-lg-50"><!--begin::Label--><divclass="me-5"><labelclass="fs-6 fw-semibold form-label">Save Card for further billing?</label><divclass="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div></div><!--end::Label--><!--begin::Switch--><labelclass="form-check form-switch form-check-custom form-check-solid"><inputclass="form-check-input"type="checkbox"value="1"checked="checked"/><spanclass="form-check-label fw-semibold text-muted">
Save Card
</span></label><!--end::Switch--></div><!--end::Input group-->