### Form Basic Elements

#### Default Input text

#### Default Input text with help

eg.someone@example.com

#### Password

#### Disabled Input field

Add attribute `disabled` to disable input field.

#### Predefined Input Value

Add attribute `value="VALUE"` to set predefined value.

#### Readonly Input field

Add attribute `readonly="readonly"` to set field readonly.

#### Input with Placeholder

#### Maximum Value

Add attribute `maxlength="NUMBER"` to input area.

Focus on label click

To set focus on label click, use `.cursor-pointer` class.

#### Static Text

email@pixinvent.com

To set static text use `.form-control-static` class.

Input with Help text at bottom

Muted help text using `.text-muted` class.

Autocomplete Disabled

Add attribute `autocomplete="off"` to disable Autocomplete.

#### Input Type Options

Text

Using `input type="text"`

Password

Using `input type="password"`

Telephone Number

Using `input type="tel"`

Email

Using `input type="email"`

URL

Using `input type="url"`

Search

Using `input type="search"`

Numbers

Using `input type="number"`

Date Time

Using `input type="datetime-local"`

Date

Using `input type="date"`

Time

Using `input type="time"`

Week

Using `input type="week"`

Month

Using `input type="month"`

Color

Using `input type="color"`

Range

Using `input type="range"`

#### Basic Textarea

Basic Textarea
Textarea with Placeholder
Textarea with Description

Textarea description text.

#### Basic Select

Basic select
Custom select

To use custom select add class`.custom-select` to select.

Multiple select

To use multiple select add an attribute`multiple="multiple"`.

#### Basic Input Style 2

Another Input style using `.form-group-style`

Input text Style 2
Email
Password
URL

Another Select style using `.form-group-style`

Number
Textarea
Select

Another types using `.form-group-style` class.

DateTime
Date
Time
Month

#### Basic File Browser

File input

#### Basic File Input

Choose file

#### Input Font Options

Normal Font

`.font-weight-normal` class for normal font

Bold Font

`.font-weight-bold` class for bold font

Italic Font

`.font-weight-italic` class for italic font

Lowercase Font

`.text-lowercase` class for lowercase font

Capitalized Text

`.text-capitalize` class for capitalize font

Uppercased Text

`.text-uppercased` class for uppercased font

Left Aligned Text

`.text-left` class for left align text in input

Center Aligned Text

`.text-center` class for center align text in input

Right Aligned Text

`.text-right` class for right align text in input

Large Font

`.font-size-large` class for large input font

Small Font

`.font-size-small` class for small input font

Extra Small Font

`.font-size-xsmall` class for XSmall input font

#### Basic Form Helpers

#### Form Helper Left

Helper aligned to left

#### Form Helper Center

Helper aligned to center

#### Form Helper Right

Helper aligned to right

#### Form Helper Left with color label

Helper aligned to left

#### Form Helper Center with color label

Helper aligned to center

#### Form Helper Right with color label

Helper aligned to right

#### Form Helper Left with block color label

Helper aligned to left

#### Form Helper Center with block color label

Helper aligned to center

#### Form Helper Right with block color label

Helper aligned to right

#### Inline Helper

Inline helper class `.block-tag`

#### Inline Helper with color

Inline color helper

#### Inputs With Tooltip

#### Tooltip On Focus

#### Tooltip On Hover

#### Tooltip Bottom

#### Tooltip On Right

#### Tooltip On Left

#### Tooltip Top

#### Input Styling

Rounded Input

`.round` class for rounded field

Squared Input

`.square` class for squared field

Default Input

Default Input Field

#### Input Column Sizing

Column sizing 1
Column sizing 2
Column sizing 3

#### Control Sizing Options

Extra Large Input

XLarge Input class `.input-xl`

Extra Large Select

XLarge Input class `.input-xl` for select

Large Input

Large Input class `.input-lg`

Large Select

Large Input class `.input-lg` for select

Default Input
Default Select
Small Input

Small Input class `.input-sm`

Small Select

Small Input class `.input-sm` for select

Extra Small Input

XSmall Input class `.input-xs`

Extra Small Select

XSmall Input class `.input-xs` for select

#### Input Validation States

Danger State

Use`.has-danger` class for danger state

Success State

Use`.has-success` class for success state

Warning State

Use`.has-warning` class for warning state

#### Input with Icons

Extra Large Input with Left Icon

Icon Left class `.has-icon-left`, XLarge Input class `.input-xl`& `.font-medium-4` class for XLarge Icon

Icon Left class `.has-icon-left`, XLarge Input class `.input-xl`& `.font-medium-4` class for XLarge Icon
Extra Large Input with Right Icon

XLarge Input class `.input-xl`& `.font-medium-4` class for XLarge Icon

XLarge Input class `.input-xl`& `.font-medium-4` class for XLarge Icon
Large Input with Left Icon

Icon Left class `.has-icon-left`, Large Input class `.input-lg`& `.font-medium-4` class for Large Icon

Icon Left class `.has-icon-left`, Large Input class `.input-lg`& `.font-medium-4` class for Large Icon
Large Input with Right Icon

Large Input class `.input-lg`& `.font-medium-4` class for Large Icon

Large Input class `.input-lg`& `.font-medium-4` class for Large Icon
Default Input with Left Icon
Default Input with Right Icon

#### Small Input with Left Icon

Icon Left class `.has-icon-left`, Small Input class `.input-sm`& `.font-small-4` class for Small Icon

#### Small Input with Right Icon

Small Input class `.input-sm`& `.font-small-4` class for Small Icon

#### Extra Small Input with Left Icon

Icon Left class `.has-icon-left`, XSmall Input class `.input-xs`& `.font-small-2` class for XSmall Icon

#### Extra Small Input with Right Icon

XSmall Input class `.input-xs`& `.font-small-2` class for XSmall Icon

#### Round Input with Icon

Use class `.has-icon-left` class for Left Icon.

#### Round Input with Right Spin Icon

Default right icon. No classes needed.

#### Default Input with Spin Icon

Icon Left class `.has-icon-left` & `.spinner` class to spin the Icon

#### Default Input with Right Spin Icon

`.spinner` class to spin the Icon

#### Control Color Options

Input Font Color
Input Border Color
Input Background Color
Select Font Color
Select Border Color
Select Background Color
Textarea Font Color
Textarea font Color
Textarea Border Color
Textarea with Colored Border
Textarea Background Color
Textarea with Colored background