<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "Checkbox & Radio";
    include('partials/app-meta-title.php') ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "Checkbox & Radio"; $pageSubTitle1 = "Design"; $pageSubTitle2 = "Forms"; $pageSubText = "Checkboxes and radio buttons form elements with support for custom designs using classes like <code>.form-check</code> and <code>.form-check-input</code>."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">

                        <div class="row">
                            <div class="col-xl-6">
                                <div id="panel-1" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Checkbox <span class="fw-300"><i>inputs</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add <code>.form-check</code> wrapper to your <code>input</code> and <code>label</code> to create a custom checkbox component. You can add <code>.rounded-circle</code> to the input to make it circular.
                                            </div>
                                            <button id="js-checkbox-toggle" type="button" data-toggle="button" class="btn btn-outline-danger mb-g">Change to CIRCLE</button>

                                            <h5 class="frame-heading">Block alignment</h5>
                                            <div class="frame-wrap">
                                                <div class="demo demo-checkbox">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="defaultUnchecked">
                                                        <label class="form-check-label" for="defaultUnchecked">Unchecked</label>
                                                    </div>

                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="defaultChecked" checked>
                                                        <label class="form-check-label" for="defaultChecked">Checked</label>
                                                    </div>

                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="defaultIndeterminate" checked>
                                                        <label class="form-check-label" for="defaultIndeterminate">Indeterminate</label>
                                                    </div>

                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="defaultUncheckedDisabled" disabled>
                                                        <label class="form-check-label" for="defaultUncheckedDisabled">Unchecked & disabled</label>
                                                    </div>

                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="defaultCheckedDisabled" checked disabled>
                                                        <label class="form-check-label" for="defaultCheckedDisabled">Checked & disabled</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <h5 class="frame-heading">Inline alignment</h5>
                                            <div class="frame-wrap demo-checkbox">
                                                <div class="form-check form-check-inline">
                                                    <input type="checkbox" class="form-check-input" id="defaultInline1">
                                                    <label class="form-check-label" for="defaultInline1">Unchecked</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="checkbox" class="form-check-input" id="defaultInline2" checked>
                                                    <label class="form-check-label" for="defaultInline2">Checked</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="checkbox" class="form-check-input" id="defaultInlined" disabled>
                                                    <label class="form-check-label" for="defaultInlined">Disabled</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="checkbox" class="form-check-input" id="defaultInline3" checked disabled>
                                                    <label class="form-check-label" for="defaultInline3">Checked & disabled</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div id="panel-2" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Radio <span class="fw-300"><i>inputs</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add <code>.form-check</code> wrapper to your <code>input</code> and <code>label</code> to
                                                create a custom radio component. You can add <code>.rounded</code> to change it to a rounded radio
                                            </div>
                                            <button id="js-radio-toggle" type="button" data-toggle="button" class="btn btn-outline-danger mb-g">Change to ROUNDED</button>
                                            <h5 class="frame-heading">Block alignment</h5>
                                            <div class="frame-wrap">
                                                <div class="demo demo-radio">
                                                    <div class="form-check">
                                                        <input type="radio" class="form-check-input" id="defaultUncheckedRadio" name="defaultExampleRadios">
                                                        <label class="form-check-label" for="defaultUncheckedRadio">Unchecked</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input type="radio" class="form-check-input" id="defaultCheckedRadio" name="defaultExampleRadios" checked>
                                                        <label class="form-check-label" for="defaultCheckedRadio">Checked</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input type="radio" class="form-check-input active" id="defaultUncheckedRadio2" name="defaultExampleRadios">
                                                        <label class="form-check-label" for="defaultUncheckedRadio2">Unchecked</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input type="radio" class="form-check-input" id="defaultUncheckedDisabledRadio2" name="defaultExampleRadios1" disabled>
                                                        <label class="form-check-label" for="defaultUncheckedDisabledRadio2">Disabled</label>
                                                    </div>
                                                    <div class="form-check">
                                                        <input type="radio" class="form-check-input" id="defaultCheckedDisabledRadio2" name="defaultCheckedDisabledRadio2" checked disabled>
                                                        <label class="form-check-label" for="defaultCheckedDisabledRadio2">Checked & disabled</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <h5 class="frame-heading">Inline alignment</h5>
                                            <div class="frame-wrap demo-radio">
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" class="form-check-input" id="defaultInline1Radio" name="inlineDefaultRadiosExample">
                                                    <label class="form-check-label" for="defaultInline1Radio">Unchecked</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" class="form-check-input" id="defaultInline2Radio" name="inlineDefaultRadiosExample" checked>
                                                    <label class="form-check-label" for="defaultInline2Radio">Checked</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" class="form-check-input" id="defaultInline4Radio" name="inlineDefaultRadiosExample2" disabled>
                                                    <label class="form-check-label" for="defaultInline4Radio">Disabled</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input type="radio" class="form-check-input" id="defaultInline3Radio" name="inlineDefaultRadiosExample2" checked disabled>
                                                    <label class="form-check-label" for="defaultInline3Radio">Checked & disabled</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-12">
                                <div id="panel-3" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>
                                            Switch <span class="fw-300"><i>radio and checkbox</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">

                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                A switch has the markup of a custom checkbox but uses <code>.form-switch</code> to render a toggle switch. Switches also support the <code>disabled</code> attribute
                                            </div>
                                            <div class="row">
                                                <div class="col-xl-6">
                                                    <h5 class="frame-heading">
                                                        Switch checkbox
                                                    </h5>
                                                    <div class="frame-wrap demo">
                                                        <div class="demo">
                                                            <div class="form-check form-switch">
                                                                <input type="checkbox" class="form-check-input" id="customSwitch1">
                                                                <label class="form-check-label" for="customSwitch1">Unchecked</label>
                                                            </div>
                                                            <div class="form-check form-switch">
                                                                <input type="checkbox" class="form-check-input" id="customSwitch2" checked>
                                                                <label class="form-check-label" for="customSwitch2">Checked</label>
                                                            </div>
                                                            <div class="form-check form-switch">
                                                                <input type="checkbox" class="form-check-input" disabled id="customSwitchd">
                                                                <label class="form-check-label" for="customSwitchd">Disabled</label>
                                                            </div>
                                                            <div class="form-check form-switch">
                                                                <input type="checkbox" class="form-check-input" id="customSwitch3" checked disabled>
                                                                <label class="form-check-label" for="customSwitch3">Checked & disabled</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-6">
                                                    <h5 class="frame-heading">Switch Radio</h5>
                                                    <div class="frame-wrap demo">
                                                        <div class="demo">
                                                            <div class="form-check form-switch">
                                                                <input type="radio" class="form-check-input" id="customSwitch1radio" name="defaultSwitchRadioExample">
                                                                <label class="form-check-label" for="customSwitch1radio">Unchecked</label>
                                                            </div>
                                                            <div class="form-check form-switch">
                                                                <input type="radio" class="form-check-input" id="customSwitch2radio" checked name="defaultSwitchRadioExample">
                                                                <label class="form-check-label" for="customSwitch2radio">Checked</label>
                                                            </div>
                                                            <div class="form-check form-switch">
                                                                <input type="radio" class="form-check-input" disabled id="customSwitchdradio" name="defaultSwitchRadioExample2">
                                                                <label class="form-check-label" for="customSwitchdradio">Disabled</label>
                                                            </div>
                                                            <div class="form-check form-switch">
                                                                <input type="radio" class="form-check-input" id="customSwitch3radio" checked disabled name="defaultSwitchRadioExample2">
                                                                <label class="form-check-label" for="customSwitch3radio">Checked & disabled</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

    <script src="/public/scripts/pages/checkboxandradio.js"></script>

</body>

</html>