Form Elements

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are 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

Input text Default

Input with Text

Usd

Input with Icon Left

Input with Icon Right

Textarea

Default File Upload

Choose file

Default Select

Default Select Multiple

State Preview

Focus State

Filled State

Error State

Disabled State

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—like <input>s, <select>s, and <textarea>s—are 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

Input text outlined

Input with icon

Outlined Select

Date Picker

Time Picker

Outlined Sizes

Input text xl

Input text lg

Input text

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.

Select2 Default

Select2 With Search

Select2 Multiple

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  js-select2">            ...        </select>    </div></div>