- ###### Files

- Two new item submitted

  Marketing Manager
  '17kb

- 52 JPG file Generated

  FontEnd Developer
  '11kb

- 25 PDF File Uploaded

  Digital Marketing Manager
  '150kb

- Anna_Strong.doc

  Web Designer
  '256kb

- ###### Members

- John Doe

  UI designer

- Michal Clark

  FontEnd Developer

- Milena Gibson

  Digital Marketing Manager

- Anna Strong

  Web Designer

- No results found.

#### Basic Inputs

Basic Input
Input text with help eg.someone@example.com
Disabled Input
With Helper Text

Find helper text here for given textbox.

Readonly Input
Static Text

email@pixinvent.com

#### Input Styles

To set rounded border to input box, use `.round` class and to set square border to input box, use `.sqaure` class alongwith `.form-control` class.

Rounded Input
Square Input

#### Floating Label Inputs

For Flating Label Inputs, need to use `.form-label-group` class & add attribute `disabled` for disabled Floating Label Input.

Label-placeholder
Disabled-placeholder
File input
Simple File Input
With Browse button
Choose file

#### Input Validation States

You can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.

Valid State
This is valid state.
Invalid State
This is invalid state.

#### Input Validation States with Tootltips

`.{valid/invalid}-feedback` classes for `.{valid/invalid}-tooltip` classes to display validation feedback in a styled tooltip.

First name
Looks good!
Last name
Looks good!
City
Please provide a valid city.

#### Input with Icons

For Input Box with left side icon, use class `.has-icon-left` and for use divider between icon and input text box use `.input-divider-left` or `.input-divider-right` for left and right divider respectively.

Left Icon
Right Icon
Left Icon with Divider
Right Icon with divider

#### Floating Label Input with Icons

Left Icon
Icon Left, Default Input
Right Icon
Icon Right, Default Input
Left Icon with Divider
Icon Left, Default Input
Right Icon with divider
Icon Right, Default Input

#### Control Sizing Option

For different sizes of Input, Use classes like `.form-control-lg` & `.form-control-sm` for Large, Small input box.

Large
Default
Small

#### Label Control Sizing Option

For different sizes of Input, Use classes like `.form-control-lg` & `.form-control-sm` for Large, Small input box.

Large
Large Input
Default
Default Input
Small
Small Input