Metronic 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/.
 
									
									
									
										
										
										
										
										Use
										.form-control-solidclass with
										.form-controlto set solid background style for a form control:
										
										
										
										
									 
									
									
									
										
										
										
										
										Use
										.form-control-flushclass with
										.form-controlto remove the default background-color, borders, and rounded corners of a form input.
										
										
										
										
									 
									
									
									
										
										
										
										
										Use
										.requiredclass with
										.form-labelor any custom element to indicate input's mandatory status:
										
										
										
										
									 
									
									
									
										
										
										
										
										Use
										.form-select-solidclass with
										.form-selectto set solid background style for a form select:
										
										
										
											
												
													Default select 
													
														Open this select menu 
														One 
														Two 
														Three 
													 
												
												
													Transparent background style 
													
														Open this select menu 
														One 
														Two 
														Three 
													 
												
												
													White background style 
													
														Open this select menu 
														One 
														Two 
														Three 
													 
												
												
												
													
													
														copy 
														
															
<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>
 
														 
													 
													
												 
												
											 
										 
										
									 
									
									
									
									
									
									 
									
									>
									
									
Use
									.form-check-customand
									.form-check-solidclass with
									.form-checkto set custom layout with solid background style for a form check:
									
									
									
									
									
									Use
									.form-check-{success, danger, warning}classes for checkbox and radio to change their checked states:
									
									
									
										
											
											
											
											
											
												
												
													copy 
													
														
<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:
									
									
									
										
											
											
											
											
											
											
												
												
													copy 
													
														
<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>
 
													 
												 
												
											 
											
										 
									 
									
									
									
									
									
									
										
											
											
											
											
												
												
													copy 
													
														
<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
										.form-check-customand
										.form-check-solidclass with
										.form-switchto set custom layout with solid background style for a form switch:
										
										
										
										
										
										
										
										
										
											
												
												
												
													
													
														copy 
														
															
<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>