Form Elements Documetation

Input

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Input Types

Check input type options below that can be used :

Input Types Usage
Input text type <input type="text">
Password Input <input type="password">
Telephone Number <input type="tel">
Email field <input type="email">
URL field <input type="url">
Search Input <input type="search">
Number Input <input type="number">
Date Time <input type="datetime-local">
Date <input type="date">
Time <input type="time">
Week <input type="week">
Month <input type="month">
Color <input type="color">
Range <input type="range">

More input types example can be like :


Input Style

Use .form-group-style class with .form-group class which contains label and form field.

Find input style options below :

Input style options Class Description
Rounded Input .round Use this class for round styled input.
Square Input .square Use this class for square styled input.
Input Sizing .input-[xl/lg/sm/xs] Use this class for different input sizing.
Input with Icons .has-icon-left Default icon align is right. For left align icon use this class.
Input Background Color .bg-* Use this class for background color from THEME_COLOR.
Input Border Color .border-* Use this class for border color from THEME_COLOR.

More input style example can be like :


Input Form Validation

Check input form validation option below :

Form Validation Class Description
Danger State .has-danger Use this class for danger state
Success State .has-success Use this class for success state
Warning State .has-warning Use this class for warning state

More form validation example can be like :

Example Type URL
Template Page https://modernadmin.evolvision.com/form-elements/form-inputs

Input Groups

Use .input-group class with an .input-group-addon class to prepend or append elements to a .form-control. Place one add-on or button on either side of an input. You may also place one on both sides of an input. It does not support multiple add-ons on a single side, nor multiple form-controls in a single input group.

Check input group options below that can be used :

Input Group Options Class Description
Input Group .input-group-addon To add input group addon to input. To add icon to left, add span with this class before. To add icon to right, add span using class after. You can add add-on to both the sides too.
Input Group Sizing .input-group-[lg/sm/xs] For large,small & Extra small input groups.
Input Group Buttons .input-group-btn To add input group button to input. To add button to left, add span with this class before. To add button to right, add span using this class after. You can add button to both the sides too.
Input Group add-on bg color .bg-* To color using this class to the addon.
Input Group validation .has-[danger/success/warning] For danger/success/warning input group validation.
Input Group validation with icon .form-control-[danger/success/warning] Use this class to add icon with input group validation.

Here are Input group example links below :

Example Type URL
Template Page https://modernadmin.evolvision.com/form-elements/input-groups

Input Grids

Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.

Check input grid options below that can be used :

Input Grid Options Class Description
Extra small class prefix .col-* For extra small grids (<576px) for 1 to 12 grids.
Small class prefix .col-sm-* For small grids (≥576px) for 1 to 12 grids.
Medium class prefix .col-md-* For medium grids (≥768px) for 1 to 12 grids.
Large class prefix .col-lg-* For large grids (≥992px) for 1 to 12 grids.
Extra large class prefix .col-xl-* For extra large grids (≥1200px) for 1 to 12 grids.

Grid Options Examples :

Example Type URL
Template Page https://modernadmin.evolvision.com/form-elements/input-grid

Checkbox

Form checkbox options with different classes and advance options.

Some checkbox options below that can be used :

Checkbox Options Class Description
Right Side checkbox .right-checkbox Use this class to add checkbox on right side.
Custom Checkbox .custom-input.custom-checkbox Use this class as a single wrapper & add <span class="custom-control--indicator"></span> for better output. Also use .custom-control-description class for checkbox description.
Color Checkbox .bg-* Use this class with THEME_COLOR for checkbox color.
Inline Checkbox .inline Use this class for inline checkbox option.
Image Checkbox .img-thumbnail Use this class to <img> tag after input type checkbox.

Radio

Form radio options with different classes and advance options.

Some radio options below that can be used :

Radio Options Class Description
Right Side radio .right-radio Use this class to add radio on right side.
Custom Radio .custom-input.custom-radio Use this class as a single wrapper & add <span class="custom-control--indicator"></span> for better output. Also use .custom-control-description class for radio description.
Color Radio .bg-* Use this class with THEME_COLOR for radio color.
Inline Radio .inline Use this class for inline radio option.
Image Radio .img-thumbnail Use this class to <img> tag after input type radio.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.2/components/forms/#checkboxes-and-radios
iCheck Plugin http://icheck.fronteed.com/
Template Page https://modernadmin.evolvision.com/form-elements/checkboxes-radios

Switch

NPM

Install ngx-ui-switch using npm

Ngx-ui-switch

npm install ngx-ui-switch --save

UI-Components Module

Add SwitchComponent into your UIComponentsModule class. ui-components.module.ts would look like this

    
import {NgModule} from '@angular/core'; 
import { UiSwitchModule } from 'ngx-ui-switch';
import { SwitchComponent } from './extra/switch/switch.component';

@NgModule({             
imports: [UiSwitchModule],              
declarations: [SwitchComponent]
})
export class UIComponentsModule { }
                    

Switch Markup

switch.component.html would look like this

     
<ui-switch [(ngModel)]="enable"></ui-switch>
                            

Switch Component

switch.component.ts would look like this

    
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-switch',
    templateUrl: './switch.component.html',
    styleUrls: ['./switch.component.scss']
})
export class SwitchComponent implements OnInit {    
    enable = true;        
    constructor() { }    
    ngOnInit(): void { }   
}
        
                        

Refer following links for usage:

Select2

Turn checkboxes and radio buttons in switches.

Directives :

Directive Selector Description
NgSelect ng-select A lightweight and highly configurable NgSelect directive

Refer following links for detailed documentation, configuration options, methods and examples: