##### Basic Input Text

No `props` are required when using the default style.

    <input type="text" placeholder="Username" class="form-control moving-placeholder" id="inputExample01">

##### Disabled Text Input

No `props` are required when using the default style.

    <input type="text" placeholder="Username" class="form-control" id="inputExample02" disabled>

##### Label Input

No `props` are required when using the default style.

Username

    <label for="inputLabelExample" class="form-label">Username</label>
    <input type="text" placeholder="Enter Your Name" class="form-control" id="inputLabelExample">

##### Label Input Required

No `props` are required when using the default style.

Name*

    <label for="labelInputRequired" class="form-label">Name<span class="text-danger ms-1">*</span></label>
    <input type="text" placeholder="Enter Your Name" class="form-control" id="labelInputRequired" required>

##### Read Only

No `props` are required when using the default style.

Read Only

    <label for="InputReadOnly" class="form-label">Read Only</label>
    <input type="text" placeholder="You can read only me" class="form-control" id="InputReadOnly" readonly>

##### Input With Button

No `props` are required when using the default style.

    <div class="d-flex align-items-center gap-3">
        <input type="text" placeholder="Enter your email" class="form-control">
        <button class="btn btn-primary">Subscribe</button>
    </div>

##### With Description

No `props` are required when using the default style.

We'll never share your email with anyone else.

    <input type="text" placeholder="Username" class="form-control" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>

##### With Error Message

No `props` are required when using the default style.

Username
Please provide a valid username.

    <label for="InputErrorMessage" class="form-label is-invalid">Username</label>
    <input type="text" class="form-control is-invalid" id="InputErrorMessage" placeholder="Username" required>
    <div class="invalid-feedback">
        Please provide a valid username.
    </div>

##### Input Size & Rounded

You have the option to include `supportive text` either below or above the input field.

    <!--Input Size-->
    <div class="mb-3">
        <input type="text" class="form-control form-control-sm" id="inputExample10" placeholder="Username">
    </div>
    <div class="mb-3">
        <input type="text" class="form-control" id="inputExample11" placeholder="Username">
    </div>
    <div>
        <input type="text" class="form-control form-control-lg" id="inputExample12" placeholder="Username">
    </div>

    <!-- Input rounded -->
    <div class="mb-3">
        <input type="text" class="form-control rounded-0" id="inputExample13" placeholder="Username">
    </div>
    <div class="mb-3">
        <input type="text" class="form-control rounded-1" id="inputExample14" placeholder="Username">
    </div>
    <div class="mb-3">
        <input type="text" class="form-control rounded-4" id="inputExample15" placeholder="Username">
    </div>
    <div>
        <input type="text" class="form-control rounded-5" id="inputExample16" placeholder="Username">
    </div>

##### Colors

You have the option to include `supportive text` either below or above the input field.

    <div class="row g-3">
        <div class="col-12 col-xl-6">
            <input type="text" class="form-control" id="inputExample17" placeholder="Default">
        </div>
        <div class="col-12 col-xl-6">
            <input type="text" class="form-control form-control-primary" id="inputExample18" placeholder="Primary">
        </div>
        <div class="col-12 col-xl-6">
            <input type="text" class="form-control form-control-secondary" id="inputExample19" placeholder="Secondary">
        </div>
        <div class="col-12 col-xl-6">
            <input type="text" class="form-control form-control-success" id="inputExample20" placeholder="Success">
        </div>
        <div class="col-12 col-xl-6">
            <input type="text" class="form-control form-control-info" id="inputExample21" placeholder="Info">
        </div>
        <div class="col-12 col-xl-6">
            <input type="text" class="form-control form-control-warning" id="inputExample22" placeholder="Warning">
        </div>
        <div class="col-12 col-xl-6">
            <input type="text" class="form-control form-control-danger" id="inputExample23" placeholder="Danger">
        </div>
        <div class="col-12 col-xl-6">
            <input type="text" class="form-control form-control-dark" id="inputExample25" placeholder="Dark">
        </div>
    </div>

##### Variant

You have the option to include `supportive text` either below or above the input field.

Input with Icon
Input with Icon Right
Input Date
Input Time
Color Picker
Country Selector
Textarea
Plain Text
Type Search

    <div class="row gy-4">
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample26" class="form-label">Input with Icon</label>
            <div class="form-icon">
                <input type="email" class="form-control form-control-icon" id="inputExample26" placeholder="example@gmail.com">
                <i class="ri-mail-unread-line"></i>
            </div>
        </div>
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample27" class="form-label">Input with Icon Right</label>
            <div class="form-icon right">
                <input type="email" class="form-control form-control-icon" id="inputExample27" placeholder="example@gmail.com">
                <i class="ri-mail-unread-line"></i>
            </div>
        </div>
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample28" class="form-label">Input Date</label>
            <input type="date" class="form-control" id="inputExample28">
        </div>
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample29" class="form-label">Input Time</label>
            <input type="time" class="form-control" id="inputExample29">
        </div>
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample30" class="form-label">Color Picker</label>
            <input type="color" class="form-control form-control-color w-100" value="#007bff" title="Choose your color" id="inputExample30">
        </div>
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample31" class="form-label">Country Selector</label>
            <input list="datalistOptions" class="form-control" placeholder="Search your country..." id="inputExample31">
            <datalist id="datalistOptions">
                <option value="United States">
                <option value="Canada">
                <option value="United Kingdom">
                <option value="Australia">
                <option value="Germany">
                <option value="France">
                <option value="Italy">
                <option value="Spain">
            </datalist>
        </div>
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample32" class="form-label">Textarea</label>
            <textarea class="form-control" id="inputExample32" rows="3"></textarea>
        </div>
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample33" class="form-label">Plain Text</label>
            <input type="text" readonly class="form-control-plaintext" id="inputExample33" value="email@example.com">
        </div>
        <div class="col-12 col-xl-6 col-xxl-4">
            <label for="inputExample34" class="form-label">Type Search</label>
            <input type="search" class="form-control" id="inputExample34" placeholder="Search">
        </div>
    </div>

##### Basic File Upload

You have the option to include `supportive text` either below or above the input field.

Default file input example
Multiple files input example
Disabled file input example
Small file input example

    <div class="row g-4">
        <div class="col-12 col-xl-6">
            <label for="inputExample35" class="form-label">Default file input example</label>
            <input class="form-control" type="file" id="inputExample35">
        </div>
        <div class="col-12 col-xl-6">
            <label for="inputExample36" class="form-label">Multiple files input example</label>
            <input class="form-control" type="file" id="inputExample36" multiple>
        </div>
        <div class="col-12 col-xl-6">
            <label for="inputExample37" class="form-label">Disabled file input example</label>
            <input class="form-control" type="file" id="inputExample37" disabled>
        </div>
        <div class="col-12 col-xl-6">
            <label for="inputExample38" class="form-label">Small file input example</label>
            <input class="form-control form-control-sm" id="inputExample38" type="file">
        </div>
    </div>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark