# Documentation v8.0.38

Preview Downloads Purchase

# Overview

Metronic customizes the Bootstrap Forms through the SASS variables in `src/sass/components/_variables.scss`and adds additonal options for the form elements in `src/sass/components/forms/`.

# Custom Form Control

Use `.form-control-solid`class with `.form-control`to set solid background style for a form control:
Default input
Solid background style
Transparent background style

    <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-flush`class with `.form-control`to remove the default background-color, borders, and rounded corners of a form input.
Example

    <input type="email" class="form-control form-control-flush" placeholder="Example input"/>

# Form Labels

Use `.required`class with `.form-label`or any custom element to indicate input's mandatory status:
Example

    <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>

# Custom Form Select

Use `.form-select-solid`class with `.form-select`to set solid background style for a form select:
Default select
Transparent background style
White background style

    <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>

# Custom Checkbox & Radio

>
Use `.form-check-custom`and `.form-check-solid`class with `.form-check`to set custom layout with solid background style for a form check:
Default checkbox
Without id linking
Checked checkbox
Disabled checkbox
Default radio
Without id linking
Checked radio
Disabled radio

    <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:
Success
Danger
Warning

    <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:
Large checkbox
Large radio
Small checkbox
Small radio

    <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:
40px
40px
50px
40px
40px
50px

    <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>

# Custom Switch

Use `.form-check-custom`and `.form-check-solid`class with `.form-switch`to set custom layout with solid background style for a form switch:
Default switch
Without id linking
Checked switch
Disabled 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:
20px x 30px
30px X 50px
40px X 60px

    <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>

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### 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 & Videos
From guides and video tutorials, to live demos and code examples to get started.
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.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now