Form Elements - General | DashLite Admin Template
logo logo-dark
AB
AB
Dashboards
Apps
Pages
Misc Pages
Error Pages
Components
logo logo-dark
Components

Form Elements

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. Here鈥檚 a quick example to demonstrate form styles, so use these classes to opt into their customized displays.

Form controls

Textual form controls鈥攍ike <input>s, <select>s, and <textarea>s鈥攁re styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more. Additional classes can be used to vary this layout on a per-form basis.

Default Preview
Usd
State Preview
Size Preview

Use .form-control-lg or .form-control-sm with .form-control for large or small input box.

Code Example
<div class="form-group">
    <label class="form-label" for="default-01">Input text label</label>
    <div class="form-control-wrap">
        <input type="text" class="form-control" id="default-01" placeholder="Input placeholder">
    </div>
</div>
<div class="form-group">
    <label class="form-label" for="default-02">Textarea label</label>
    <div class="form-control-wrap">
        <textarea class="form-control" id="default-textarea">Large text area content</textarea>
    </div>
</div>

Form Outlined

Textual form controls鈥攍ike <input>s, <select>s, and <textarea>s鈥攁re styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more. Additional classes can be used to vary this layout on a per-form basis.

Outlined Preview
Outlined Sizes

Use .form-control-outlined with .form-control for outlined form element and replace .form-label with .form-label-outlined, also place label after input/select element.

Code Example
<div class="form-group">
    <div class="form-control-wrap">
        <input type="text" class="form-control form-control-outlined" id="outlined" placeholder="Input placeholder">
        <label class="form-label-outlined" for="outlined">Input text label</label>
    </div>
</div>

Select with Select2

Using .form-select class in <select> element to replace browser default style with Select2, as its give you a customizable select box with support for searching, tagging, and many other highly used options. For the documentation for Select2, that can be found here.

For large or small size of Select2, use lg, sm in data-ui="" attribute of <select> element. And you can use on in data-search="" attribute to display search option in select2.

Code Example
<div class="form-group">
    <label class="form-label">Select2 Default</label>
    <div class="form-control-wrap">
        <select class="form-select">
            ...
        </select>
    </div>
</div>

Date Picker

Using .date-picker, .date-picker-alt class in <input> element to enable datepicker.
We have used Bootstrap Datepicker for date picker, here you see full documentation here.

Date format mm/dd/yyyy
Date format yyyy-mm-dd
Date format yyyy-mm-dd
Date format mm/dd/yyyy

Additionally you can use data-date-format="" attribute of <input> element to formate date. Default format mm/dd/yyyy.

Code Example
<div class="form-group">
    <label class="form-label">Datepicker</label>
    <div class="form-control-wrap">
        <input type="text" class="form-control date-picker">
    </div>
    <div class="form-note">Date format <code>mm/dd/yyyy</code></div>
</div>
<div class="form-group">
    <label class="form-label">Datepicker Alt</label>
    <div class="form-control-wrap">
        <input type="text" class="form-control date-picker-alt" data-date-format="yyyy-mm-dd">
    </div>
    <div class="form-note">Date format <code>yyyy-mm-dd</code></div>
</div>
<div class="form-group">
    <label class="form-label">Datepicker with Icon</label>
    <div class="form-control-wrap">
        <div class="form-icon form-icon-left">
            <em class="icon ni ni-calendar"></em>
        </div>
        <input type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd">
    </div>
    <div class="form-note">Date format <code>yyyy-mm-dd</code></div>
</div>
<div class="form-group">
    <label class="form-label">Datepicker Alt with Icon</label>
    <div class="form-control-wrap">
        <div class="form-icon form-icon-right">
            <em class="icon ni ni-calendar-alt"></em>
        </div>
        <input type="text" class="form-control date-picker">
    </div>
    <div class="form-note">Date format <code>mm/dd/yyyy</code></div>
</div>

Time Picker

Using .time-picker class in <select> element to enable time picker.
We have used Bootstrap Timepicker for date picker, here you see full documentation here.

Additionally you can use some_thing_else attribute of <input> element.

Code Example
<div class="form-group">
    <label class="form-label">Timepicker</label>
    <div class="form-control-wrap">
        <input type="text" class="form-control time-picker" placeholder="Input placeholder">
    </div>
</div>

Checkbox Styles

To create custom control, wrapped with <div> each checkbox <input> & <label> using .custom-control, .custom-checkbox classes.

Default
Checked
Disabled
Check Disabled
Size

For large or small size of .custom-checkbox, use .custom-control-{lg|sm} with .custom-control class.

Code Example
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Option Label</label>
</div>
<div class="custom-control custom-control-lg custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck2">
    <label class="custom-control-label" for="customCheck2">Option Label</label>
</div>

Radio Style

To create custom control, wrapped with <div> each radio <input> & <label> using .custom-control, .custom-radio classes.

Default
Checked
Disabled
Check Disabled
Size

For large or small size of .custom-radio, use .custom-control-{lg|sm} with .custom-control class.

Code Example
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1">Radio</label>
</div>
<div class="custom-control custom-control-lg custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Radio</label>
</div>

Switch Style

The switch markup of a .custom-control checkbox but uses the .custom-switch class to render a toggle switch.

Default
Checked
Disabled
Check Disabled
Size

For large or small size of .custom-switch, use .custom-control-{lg|sm} with .custom-control class.

Code Example
<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Switch</label>
</div>
<div class="custom-control custom-control-lg custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Switch</label>
</div>