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.
<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.
<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.
<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.
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.
<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.
<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>