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

Text
Email
Password
Show/Hide Password
Placeholder
Text area
Readonly
Disabled
Static control
Helping text A block of help text that breaks onto a new line and may extend beyond one line.
Input Select
Multiple Select
Default file input
Date
Month
Time
Week
Number
Color
Range

    <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

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

#### Custom file input

Upload
Upload

#### Input masks

Date masks:
US phone mask:
Intl US phone mask:
IP mask:

#### Color & Time Picker

Color picker:
Color picker with addon:
Time picker:

#### Date picker

Date:
Date range:
Date and time range:
Date range button:

#### Select Elements

Minimal
Disabled
Multiple
Disabled Result

#### Bootstrap Select boxes

##### Select box

##### Select boxes with Option groups

##### Multiple select boxes

##### With colored Button Classes

#### Bootstrap TouchSpin

Vertical Touchspin
Postfix
Prefix
Init
Value set 30
Button group

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

Minimal skin checkbox
Minimal red skin checkbox
Flat green skin checkbox
Minimal skin radio
Minimal red skin radio
Flat green skin radio

#### Basic Checkbox

Default Filled In Default - Disabled Filled In - Disabled

#### Basic Checkbox Design Colors

Primary Success Info Warning Danger

#### Basic Checkbox Design Colors with Filled In

Primary Success Info Warning Danger

#### Basic Radio Button

Radio - 1 Radio - 2 Radio - With Gap Radio - With Gap Radio - Disabled Radio - Disabled

#### Basic Radio Button Design Colors

Primary Success Info Warning Danger

#### Basic Radio Button Design Colors with Outline

Primary Success Info Warning Danger

#### User Profile 12 messages

##### Nil Yeager

Manager

dummy@gmail.com
My Profile Account settings and more
My Messages Inbox and tasks
Settings Accout Settings
Project latest tasks and projects

#### 10:10

Morbi quis ex eu arcu auctor sagittis.

by Johne

#### 08:40

Proin iaculis eros non odio ornare efficitur.

by Amla

#### 07:10

In mattis mi ut posuere consectetur.

by Josef

#### 01:15

Morbi quis ex eu arcu auctor sagittis.

by Rima

#### 23:12

Morbi quis ex eu arcu auctor sagittis.

by Alaxa

#### 10:10

Morbi quis ex eu arcu auctor sagittis.

by Johne

#### 08:40

Proin iaculis eros non odio ornare efficitur.

by Amla

#### 07:10

In mattis mi ut posuere consectetur.

by Josef

#### 01:15

Morbi quis ex eu arcu auctor sagittis.

by Rima

#### 23:12

Morbi quis ex eu arcu auctor sagittis.

by Alaxa
Mayra Sibley
Active
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?