Components

## Form Elements

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

#### 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
Large text area content
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">
                ...
            </select>
        </div>
    </div>