Advanced Form Elements

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.

A block of help text that breaks onto a new line and may extend beyond one line.
										
<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

Select Elements

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.

Tags

iCheck - Checkbox & Radio Inputs

Basic Checkbox

Basic Checkbox Design Colors

Basic Checkbox Design Colors with Filled In

Basic Radio Button

Basic Radio Button Design Colors

Basic Radio Button Design Colors with Outline

Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?