- var theme_customizer = true; - var sidebar = true; - var slick = true; - var header_slider = true; - var animate = true; - var scrollbar = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader include ../../components/taptop // page-wrapper Start #pageWrapper.page-wrapper.compact-wrapper include ../../components/header // Page Body Start .page-body-wrapper include ../../components/sidebar .page-body .container-fluid .page-title .row .col-6 h3 | Checkbox & Radio .col-6 ol.breadcrumb li.breadcrumb-item a(href='index.html') svg.stroke-icon use(href='../assets/svg/icon-sprite.svg#stroke-home') li.breadcrumb-item Form Controls li.breadcrumb-item.active Checkbox & Radio // Container-fluid starts .container-fluid .row .col-md-6 .card .card-header h5 Custom Radio .card-body .row .col-sm-12 h5.mb-0 Custom Radio .col .mb-3.m-t-15.custom-radio-ml .form-check.radio.radio-primary input#radio1.form-check-input(type='radio', name='radio1', value='option1') label.form-check-label(for='radio1') | Option span.digits 1 .form-check.radio.radio-primary input#radio3.form-check-input(type='radio', name='radio1', value='option1', disabled='') label.form-check-label(for='radio3') Disabled .form-check.radio.radio-primary input#radio4.form-check-input(type='radio', name='radio1', value='option1', checked='') label.form-check-label(for='radio4') Checked .col-sm-12 h5.mb-0 Radio states .col .mb-3.m-t-15.custom-radio-ml .form-check.radio.radio-primary input#radio11.form-check-input(type='radio', name='radio1', value='option1') label.form-check-label(for='radio11') | Option span.digits 1 .form-check.radio.radio-secondary input#radio22.form-check-input(type='radio', name='radio1', value='option1') label.form-check-label(for='radio22') | Option span.digits 2 .form-check.radio.radio-success input#radio55.form-check-input(type='radio', name='radio1', value='option1') label.form-check-label(for='radio55') | Option span.digits 3 .form-check.radio.radio-info input#radio33.form-check-input(type='radio', name='radio1', value='option1', disabled='') label.form-check-label(for='radio33') | Option span.digits 4 .form-check.radio.radio-warning input#radio44.form-check-input(type='radio', name='radio1', value='option1') label.form-check-label(for='radio44') | Option span.digits 5 .form-check.radio.radio-danger input#radio66.form-check-input(type='radio', name='radio1', value='option1', checked='') label.form-check-label(for='radio66') | Option span.digits 6 .col-sm-12 h5.mb-0 Inline checkbox .col .m-t-15.m-checkbox-inline.custom-radio-ml .form-check.form-check-inline.radio.radio-primary input#radioinline1.form-check-input(type='radio', name='radio1', value='option1') label.form-check-label.mb-0(for='radioinline1') | Option span.digits 1 .form-check.form-check-inline.radio.radio-primary input#radioinline2.form-check-input(type='radio', name='radio1', value='option1') label.form-check-label.mb-0(for='radioinline2') | Option span.digits 2 .form-check.form-check-inline.radio.radio-primary input#radioinline3.form-check-input(type='radio', name='radio1', value='option1') label.form-check-label.mb-0(for='radioinline3') | Option span.digits 3 .col-md-6 .card .card-header h5 Custom checkbox .card-body .row .col-sm-12 h5.mb-0 Custom checkbox .col .mb-3.m-t-15 .form-check.checkbox.mb-0 input#checkbox1.form-check-input(type='checkbox') label.form-check-label(for='checkbox1') Default .form-check.checkbox.mb-0 input#checkbox2.form-check-input(type='checkbox', disabled='') label.form-check-label(for='checkbox2') Disabled .form-check.checkbox.mb-0 input#checkbox3.form-check-input(type='checkbox', checked='') label.form-check-label(for='checkbox3') Checked .col-sm-12 h5.mb-0 Checkbox states .col .mb-3.m-t-15 .form-check.checkbox.checkbox-primary.mb-0 input#checkbox-primary-1.form-check-input(type='checkbox') label.form-check-label(for='checkbox-primary-1') Success state .form-check.checkbox.checkbox-secondary.mb-0 input#checkbox-dark.form-check-input(type='checkbox', disabled='') label.form-check-label(for='checkbox-dark') Brand state .form-check.checkbox.checkbox-success.mb-0 input#checkbox-primary.form-check-input(type='checkbox') label.form-check-label(for='checkbox-primary') primary state .col-sm-12 h5.mb-0 Inline checkbox .col .m-t-15.m-checkbox-inline .form-check.form-check-inline.checkbox.checkbox-dark.mb-0 input#inline-1.form-check-input(type='checkbox') label.form-check-label(for='inline-1') | Option span.digits 1 .form-check.form-check-inline.checkbox.checkbox-dark.mb-0 input#inline-2.form-check-input(type='checkbox') label.form-check-label(for='inline-2') | Option span.digits 2 .form-check.form-check-inline.checkbox.checkbox-dark.mb-0 input#inline-3.form-check-input(type='checkbox') label.form-check-label(for='inline-3') | Option span.digits 3 .col-md-6 .card .card-header h5 Animated radio buttons .card-body.animate-chk .row .col label.d-block(for='edo-ani') input#edo-ani.radio_animated(type='radio', name='rdo-ani', checked='') | Option 1 label.d-block(for='edo-ani1') input#edo-ani1.radio_animated(type='radio', name='rdo-ani') | Option 2 label.d-block(for='edo-ani2') input#edo-ani2.radio_animated(type='radio', name='rdo-ani', checked='') | Option 3 label.d-block(for='edo-ani13') input#edo-ani13.radio_animated(type='radio', name='rdo-ani') | Option 4 .col-md-6 .card .card-header h5 Animated checkbox buttons .card-body.animate-chk .row .col label.d-block(for='chk-ani') input#chk-ani.checkbox_animated(type='checkbox', checked='') | Option 1 label.d-block(for='chk-ani1') input#chk-ani1.checkbox_animated(type='checkbox') | Option 2 label.d-block(for='chk-ani2') input#chk-ani2.checkbox_animated(type='checkbox', checked='') | Option 3 label.d-block(for='chk-ani3') input#chk-ani3.checkbox_animated(type='checkbox') | Option 4 .col-md-12 .card .card-header h5 Square checkbox .card-body .row .col .mb-3 .checkbox.checkbox-dark.m-squar input#inline-sqr-1(type='checkbox') label.mt-0(for='inline-sqr-1') Default .checkbox.checkbox-dark.m-squar input#inline-sqr-2(type='checkbox', disabled='') label(for='inline-sqr-2') Disabled .checkbox.checkbox-dark.m-squar input#inline-sqr-3(type='checkbox', checked='') label(for='inline-sqr-3') checked .col-sm-12 h5 Solid checkbox .col .m-t-15 .form-check.checkbox.checkbox-solid-success input#solid1.form-check-input(type='checkbox') label.form-check-label(for='solid1') Default .form-check.checkbox.checkbox-solid-dark input#solid2.form-check-input(type='checkbox', disabled='') label.form-check-label(for='solid2') Disabled .form-check.checkbox.checkbox-solid-primary input#solid3.form-check-input(type='checkbox', checked='') label.form-check-label(for='solid3') checked .form-check.checkbox.checkbox-solid-danger input#solid4.form-check-input(type='checkbox', checked='') label.form-check-label(for='solid4') checked .form-check.checkbox.checkbox-solid-light input#solid5.form-check-input(type='checkbox', checked='') label.form-check-label(for='solid5') checked .form-check.checkbox.checkbox-solid-info input#solid6.form-check-input(type='checkbox', checked='') label.form-check-label(for='solid6') checked .form-check.checkbox.checkbox-solid-dark input#solid7.form-check-input(type='checkbox', checked='') label.form-check-label.mb-0(for='solid7') checked // Container-fluid Ends include ../../components/footer include ../../components/footer-files