Logo

Documentation v1.0.4

  • Base
  • Forms
  • Controls
Preview Purchase

Overview

Good customizes the Bootstrap Forms  through the SASS variables in src/sass/components/_variables.scssand adds additonal options for the form elements in src/sass/components/forms/.

Form Control

Use .form-control-solidclass with .form-controlto set solid background style for a form control:
<input type="text" class="form-control" placeholder="name@example.com"/>
<input type="text" class="form-control form-control-solid" placeholder="name@example.com"/>
<input type="text" class="form-control form-control-transparent" placeholder="name@example.com"/>

Flush Form Control

Use .form-control-flushclass with .form-controlto remove the default background-color, borders, and rounded corners of a form input.
<input type="email" class="form-control form-control-flush" placeholder="Example input"/>

Form Labels

Use .requiredclass with .form-labelor any custom element to indicate input's mandatory status:
<div class="mb-10">
    <label for="exampleFormControlInput1" class="required form-label">Example</label>
    <input type="email" class="form-control form-control-solid" placeholder="Example input"/>
</div>

Form Select

Use .form-select-solidclass with .form-selectto set solid background style for a form select:
<select class="form-select" aria-label="Select example">
    <option>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select form-select-transparent" aria-label="Select example">
    <option>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="form-select form-select-transparent" aria-label="Select example">
    <option>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Checkbox & Radio

Use .form-check-customand .form-check-solidclass with .form-checkto set custom layout with solid background style for a form check:
<div class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"/>
    <label class="form-check-label" for="flexCheckDefault">
        Default checkbox
    </label>
</div>

<label class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="checkbox" value=""/>
    <span class="form-check-label">
        Without id linking
    </span>
</label>

<div class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="checked" />
    <label class="form-check-label" for="flexCheckChecked">
        Checked checkbox
    </label>
</div>

<div class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="checkbox" value="" disabled id="flexCheckDisabled" />
    <label class="form-check-label" for="flexCheckDisabled">
        Disabled checkbox
    </label>
</div>

<div class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="radio" value="" id="flexRadioDefault"/>
    <label class="form-check-label" for="flexRadioDefault">
        Default radio
    </label>
</div>

<label class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="radio" value=""/>
    <span class="form-check-label">
         id="flexRadioDefault"
    </span>
</label>

<div class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="radio" value="" id="flexRadioChecked" checked="checked" />
    <label class="form-check-label" for="flexRadioChecked">
        Checked radio
    </label>
</div>

<div class="form-check form-check-custom form-check-solid">
    <input class="form-check-input" type="radio" value="" disabled id="flexRadioDisabled"/>
    <label class="form-check-label" for="flexRadioDisabled">
        Disabled radio
    </label>
</div>
Use .form-check-{success, danger, warning}classes for checkbox and radio to change their checked states:
<div class="form-check form-check-custom form-check-success form-check-solid form-check-lg">
    <input class="form-check-input" type="checkbox" value="" checked id="flexCheckboxLg"/>
    <label class="form-check-label" for="flexCheckboxLg">
        Success
    </label>
</div>

<div class="form-check form-check-custom form-check-danger form-check-solid form-check-lg">
    <input class="form-check-input" type="radio" value="" checked id="flexCheckboxSm"  />
    <label class="form-check-label" for="flexCheckboxSm">
        Danger
    </label>
</div>

<div class="form-check form-check-custom form-check-warning form-check-solid form-check-sm">
    <input class="form-check-input" type="checkbox" value="" checked id="flexRadioLg"/>
    <label class="form-check-label" for="flexRadioLg">
        Warning
    </label>
</div>
Use .form-check-{sm, lg}fixed size classes for checkbox and radio to change their sizes:
<div class="form-check form-check-custom form-check-solid form-check-lg">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckboxLg"/>
    <label class="form-check-label" for="flexCheckboxLg">
        Large checkbox
    </label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-lg">
    <input class="form-check-input" type="radio" value="" id="flexCheckboxSm"  />
    <label class="form-check-label" for="flexCheckboxSm">
        Large radio
    </label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm">
    <input class="form-check-input" type="checkbox" value="" id="flexRadioLg"/>
    <label class="form-check-label" for="flexRadioLg">
        Small checkbox
    </label>
</div>

<div class="form-check form-check-custom form-check-solid form-check-sm">
    <input class="form-check-input" type="radio" value="" id="flexRadioSm"  />
    <label class="form-check-label" for="flexRadioSm">
        Small radio
    </label>
</div>
Use Custom Size Classes  for checkbox and radio to set custom sizes:
<div class="form-check form-check-custom form-check-solid me-10">
    <input class="form-check-input h-30px w-30px" type="checkbox" value="" id="flexCheckbox30"/>
    <label class="form-check-label" for="flexCheckbox30">
        40px
    </label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
    <input class="form-check-input h-40px w-40px" type="checkbox" value="" id="flexCheckbox40"/>
    <label class="form-check-label" for="flexCheckbox40">
        40px
    </label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
    <input class="form-check-input h-50px w-50px" type="checkbox" value="" id="flexCheckbox50"/>
    <label class="form-check-label" for="flexCheckbox50">
        50px
    </label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
    <input class="form-check-input h-30px w-30px" type="radio" value="" id="flexRadio30"/>
    <label class="form-check-label" for="flexRadio30">
        40px
    </label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
    <input class="form-check-input h-40px w-40px" type="radio" value="" id="flexRadio40"/>
    <label class="form-check-label" for="flexRadio40">
        40px
    </label>
</div>

<div class="form-check form-check-custom form-check-solid me-10">
    <input class="form-check-input h-50px w-50px" type="radio" value="" id="flexRadio50"/>
    <label class="form-check-label" for="flexRadio50">
        50px
    </label>
</div>
Use clipped checkbox and radio with a clipped check indicator on image or any other rich content:
<!--begin::Row-->
<div class="row">
    <!--begin::Col-->
    <div class="col-4">
        <label class="form-check-clip text-center">
            <input class="btn-check" type="radio" value="1" checked name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-1.jpg"/>
            </div>

            <div class="form-check-label">
                Option 1
            </div>
        </label>
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-4">
        <label class="form-check-clip text-center">
            <input class="btn-check" type="radio" value="2" name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-2.jpg"/>
            </div>

            <div class="form-check-label">
                Option 2
            </div>
        </label>
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-4">
        <label class="form-check-clip text-center">
            <input class="btn-check" type="radio" value="3" name="option"/>
            <div class="form-check-wrapper">
                <div class="form-check-indicator"></div>
                <img class="form-check-content" src="assets/media/stock/600x400/img-3.jpg"/>
            </div>

            <div class="form-check-label">
                Option 3
            </div>
        </label>
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->
Use a checkbox and radio inputs with image through data-kt-buttonsparameters to automatically handle radio checked state for images as well:
<!--begin::Row-->
<div class="row mw-500px mb-5" data-kt-buttons="true" data-kt-buttons-target=".form-check-image, .form-check-input">>
    <!--begin::Col-->
    <div class="col-4">
        <label class="form-check-image active">
            <div class="form-check-wrapper">
                <img src="assets/media/stock/600x400/img-1.jpg"/>
            </div>

            <div class="form-check form-check-custom form-check-solid">
                <input class="form-check-input" type="radio" checked value="1" name="option2"/>
                <div class="form-check-label">
                    Option 1
                </div>
            </div>
        </label>
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-4">
        <label class="form-check-image">
            <div class="form-check-wrapper">
                <img src="assets/media/stock/600x400/img-2.jpg"/>
            </div>

            <div class="form-check form-check-custom form-check-solid me-10">
                <input class="form-check-input" type="radio" value="1" name="option2" id="text_wow"/>
                <div class="form-check-label">
                    Option 2
                </div>
            </div>
        </label>
    </div>
    <!--end::Col-->

    <!--begin::Col-->
    <div class="col-4">
        <label class="form-check-image">
            <div class="form-check-wrapper">
                <img src="assets/media/stock/600x400/img-3.jpg"/>
            </div>

            <div class="form-check form-check-custom form-check-solid me-10">
                <input class="form-check-input" type="radio" value="1" name="option2"/>
                <div class="form-check-label">
                    Option 3
                </div>
            </div>
        </label>
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->

Switch

Use .form-check-customand .form-check-solidclass with .form-switchto set custom layout with solid background style for a form switch:
<div class="form-check form-switch form-check-custom form-check-solid">
    <input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"/>
    <label class="form-check-label" for="flexSwitchDefault">
        Default switch
    </label>
</div>

<label class="form-check form-switch form-check-custom form-check-solid">
    <input class="form-check-input" type="checkbox" value=""/>
    <span class="form-check-label"">
        Without id linking
    </span>
</label>

<div class="form-check form-switch form-check-custom form-check-solid">
    <input class="form-check-input" type="checkbox" value="" id="flexSwitchChecked" checked="checked" />
    <label class="form-check-label" for="flexSwitchChecked">
        Checked switch
    </label>
</div>

<div class="form-check form-switch form-check-custom form-check-solid">
    <input class="form-check-input" type="checkbox" value="" id="flexSwitchDisabled" disabled checked="checked" />
    <label class="form-check-label" for="flexSwitchDisabled">
        Disabled switch
    </label>
</div>
Use Custom Size Classes  for switches to set custom sizes:
<div class="form-check form-switch form-check-custom form-check-solid me-10">
    <input class="form-check-input h-20px w-30px" type="checkbox" value="" id="flexSwitch20x30"/>
    <label class="form-check-label" for="flexSwitch20x30">
        20px x 30px
    </label>
</div>

<div class="form-check form-switch form-check-custom form-check-solid me-10">
    <input class="form-check-input h-30px w-50px" type="checkbox" value="" id="flexSwitch30x50"/>
    <label class="form-check-label" for="flexSwitch30x50">
        30px X 50px
    </label>
</div>

<div class="form-check form-switch form-check-custom form-check-solid me-10">
    <input class="form-check-input h-40px w-60px" type="checkbox" value="" id="flexSwitch40x60"/>
    <label class="form-check-label" for="flexSwitch40x60">
        40px X 60px
    </label>
</div>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now