Input Types
Most common form control, text-based input fields. Includes support for all HTML5 types: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, and color
.
<div class="mb-3">
<label for="simpleinput" class="form-label">Text</label>
<input type="text" id="simpleinput" class="form-control">
</div>
<div class="mb-3">
<label for="example-email" class="form-label">Email</label>
<input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
</div>
<div class="mb-3">
<label for="example-password" class="form-label">Password</label>
<input type="password" id="example-password" class="form-control" value="password">
</div>
<div class="mb-3">
<label for="password" class="form-label">Show/Hide Password</label>
<div class="input-group input-group-merge">
<input type="password" id="password" class="form-control" placeholder="Enter your password">
<div class="input-group-text" data-password="false">
<span class="password-eye"></span>
</div>
</div>
</div>
<div class="mb-3">
<label for="example-palaceholder" class="form-label">Placeholder</label>
<input type="text" id="example-palaceholder" class="form-control" placeholder="placeholder">
</div>
<div class="mb-3">
<label for="example-textarea" class="form-label">Text area</label>
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
</div>
<div class="mb-3">
<label for="example-readonly" class="form-label">Readonly</label>
<input type="text" id="example-readonly" class="form-control" readonly="" value="Readonly value">
</div>
<div class="mb-3">
<label for="example-disable" class="form-label">Disabled</label>
<input type="text" class="form-control" id="example-disable" disabled="" value="Disabled value">
</div>
<div class="mb-3">
<label for="example-static" class="form-label">Static control</label>
<input type="text" readonly class="form-control-plaintext" id="example-static" value="email@example.com">
</div>
<div class="mb-3">
<label for="example-helping" class="form-label">Helping text</label>
<input type="text" id="example-helping" class="form-control" placeholder="Helping text">
<span class="help-block"><small>A block of help text that breaks onto a new line and may extend beyond one line.</small></span>
</div>
<div class="mb-3">
<label for="example-select" class="form-label">Input Select</label>
<select class="form-select" id="example-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="mb-3">
<label for="example-multiselect" class="form-label">Multiple Select</label>
<select id="example-multiselect" multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="mb-3">
<label for="example-fileinput" class="form-label">Default file input</label>
<input type="file" id="example-fileinput" class="form-control">
</div>
<div class="mb-3">
<label for="example-date" class="form-label">Date</label>
<input class="form-control" id="example-date" type="date" name="date">
</div>
<div class="mb-3">
<label for="example-month" class="form-label">Month</label>
<input class="form-control" id="example-month" type="month" name="month">
</div>
<div class="mb-3">
<label for="example-time" class="form-label">Time</label>
<input class="form-control" id="example-time" type="time" name="time">
</div>
<div class="mb-3">
<label for="example-week" class="form-label">Week</label>
<input class="form-control" id="example-week" type="week" name="week">
</div>
<div class="mb-3">
<label for="example-number" class="form-label">Number</label>
<input class="form-control" id="example-number" type="number" name="number">
</div>
<div class="mb-3">
<label for="example-color" class="form-label">Color</label>
<input class="form-control" id="example-color" type="color" name="color" value="#727cf5">
</div>
<div class="mb-0">
<label for="example-range" class="form-label">Range</label>
<input class="form-range" id="example-range" type="range" name="range" min="0" max="100">
</div>
Basic file inputs
Custom file input
Input masks
Color & Time Picker
Date picker
Bootstrap Select boxes
Select box
Select boxes with Option groups
Multiple select boxes
With colored Button Classes
Bootstrap TouchSpin
Input Tags
Add data-role="tagsinput"
to your input field & its automatically change it to a tags input.
Select Tags
You can also use select multiple
to your input field.
Input Group Tags
You can also use group tag data-role="tagsinput"
to your input field.