Form Basic Elements

Basic Elements

Basic Input

Input text with help eg.someone@example.com

Disabled Input

Readonly Input

Input with Placeholder

Static Text

email@pixinvent.com

Rounded Input

Square Input

With Helper Text

Find helper text here for given textbox.

Textarea

Basic Textarea

Textarea with Placeholder

Textarea with Description

Select

Basic Select

Custom select

Multiple select

File input

Simple File Input

With Browse button

Choose file

Control Sizing Options

Large Input

Large Input class .form-control-lg

Large Select

Large Input class .form-control-lg for select

Default Input

Default Select

Small Input

Small Input class .form-control-sm

Small Select

Small Input class .form-control-sm 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

Large Input with Left Icon

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

Large Input with Right Icon

Large Input class .form-control-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 .form-control-sm& .font-small-4 class for Small Icon

Small Input with Right Icon

Small Input class .form-control-sm& .font-small-4 class for Small 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